{"_id":"@storybook/addon-info","_rev":"546-65a535b8cb994de9f2aa879f20439993","name":"@storybook/addon-info","description":"A Storybook addon to show additional information for your stories.","dist-tags":{"latest":"5.3.21","next":"6.0.0-alpha.2"},"versions":{"3.0.0-alpha.0":{"name":"@storybook/addon-info","version":"3.0.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"@storybook/react":"^3.0.0-alpha.0","git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-alpha.0","_shasum":"6851a63630e3195dd88e3472abf8892fc50ab28c","_from":".","_npmVersion":"4.6.1","_nodeVersion":"6.10.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"6851a63630e3195dd88e3472abf8892fc50ab28c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-alpha.0.tgz","integrity":"sha512-5EAHuKc1Wy4SQdB68PtZ091iJCiKKGDXwKSdz8JolvWz35FQCKluqWCOPAkYgGif+gPUy6ZCcFfT2V7LhOxXZA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvzQg5aZyl2D8RyryiGm2XoouDSdpApxwLmVNS8GK11AiAp2L8o6Xd0iHrXXgw09dZxih1oR9t339SKRpyF/Mtk4w=="}]},"maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/addon-info-3.0.0-alpha.0.tgz_1495051407719_0.33054473297670484"},"directories":{}},"3.0.0-alpha.1":{"name":"@storybook/addon-info","version":"3.0.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"@storybook/react":"^3.0.0-alpha.1","git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-alpha.1","_shasum":"f9cbf6086561f2a36fba40a0bd16bdcbc706af97","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"f9cbf6086561f2a36fba40a0bd16bdcbc706af97","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-alpha.1.tgz","integrity":"sha512-u1oE5BUnYxNJ3l9OAkVYZQPxPSuuJwHwSxrfzcJSmMV48KgS/BJaufRgch1O8vpYpoY5iEmVyz3yeCsW6eQlwQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBu1hCE9dVhnQLBrk5Y1nKVd1PLzCZVRbxhcomLTm2zxAiB6yCfBxfjfoTFMozVztViekidDRtDbzKe/MYdbmC8xRA=="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-alpha.1.tgz_1495226470095_0.463176783407107"},"directories":{}},"3.0.0-alpha.3":{"name":"@storybook/addon-info","version":"3.0.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"@storybook/react":"^3.0.0-alpha.3","git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-alpha.3","_shasum":"64b4d18c4d52fd1a8cb775c9a6aa7f8cedb3719c","_from":".","_npmVersion":"4.6.1","_nodeVersion":"7.9.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"64b4d18c4d52fd1a8cb775c9a6aa7f8cedb3719c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-alpha.3.tgz","integrity":"sha512-CJ3S6NLWScbPiLQTA2gpz/sFUZsavKOcul2EZiayg3faYyDmZJHtOqxKOMI1ANZKWJVRIPnf1VYCedJ/wc7Agg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1eD1Krd40KqfJKtl9yyditYXTtMOTu9V4tZZI806gHQIhAMAb6px5wQmgaM8pIEmIaxpwA+fKwSKQ/Sax6kG9WUvw"}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-alpha.3.tgz_1495389861022_0.1008429299108684"},"directories":{}},"3.0.0-alpha.4":{"name":"@storybook/addon-info","version":"3.0.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"@storybook/react":"^3.0.0-alpha.4","git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-alpha.4","_shasum":"119707f3136d4d3d668227ccda4a4cc20c17a3e8","_from":".","_npmVersion":"4.6.1","_nodeVersion":"7.9.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"119707f3136d4d3d668227ccda4a4cc20c17a3e8","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-alpha.4.tgz","integrity":"sha512-Q8dxH4NHqjDbt/nubwcA5FgEjrkqhd/SRW/uXIXziCU5cdXrQXNrdf0UaTPDqj24/mZZkmctZz8Pyl4373aJWA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTeRMb2C45vv1QOqLUrIi+NjFUZb4/fBXFn8zvdELPdAIhAJLVkeBmQYygiuKODSsswwnkjfYjp0J7EFuJfNyJMAWS"}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-alpha.4.tgz_1495490984797_0.40035169781185687"},"directories":{}},"3.0.0-alpha.5":{"name":"@storybook/addon-info","version":"3.0.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"@storybook/react":"^3.0.0-alpha.4","git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-alpha.5","_shasum":"436b11db4b3eb88b846226b60fb1dd86a95098ce","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"436b11db4b3eb88b846226b60fb1dd86a95098ce","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-alpha.5.tgz","integrity":"sha512-kC9LA5ryKtz9WiYJF7qNOgMNDdgA1Ay1wEl5LA6eo9Y5UtBkQ6BHGG9u3XtQ2yCtWpwEHAvVCj2/8Ej7fvMSMw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEK/RCom5V8ZS0KcNYpVOkwAsurKAEkvx8iOz7isLGXAiEA01nHgl8U6+/Vw3PrGrBv2P1YlAnioxov9f6ReBjwSZ0="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-alpha.5.tgz_1495595100336_0.3255546342115849"},"directories":{}},"3.0.0-rc.0":{"name":"@storybook/addon-info","version":"3.0.0-rc.0","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"@storybook/react":"^3.0.0-rc.0","git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-rc.0","_shasum":"85d3827b50714d35300b2d2f2a3acfded2a921be","_from":".","_npmVersion":"4.6.1","_nodeVersion":"7.9.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"85d3827b50714d35300b2d2f2a3acfded2a921be","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-rc.0.tgz","integrity":"sha512-wU04LPAHw0IqascrJesfbZJhshRYfwRl9AxBlyb+xw8DzDfw6GC5JEiDSvKWDp4cLmJJqeousg/yejWPowbjIw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4SLvEcMIUecHda5qVHZrbVQHj9gIpHYTVLs3VCFo4GAiEA6X6ns4Si7vjXGpPOJNq6XsdhtFa7KKys0g75qn5k7Rg="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-rc.0.tgz_1495729748700_0.36642127158120275"},"directories":{}},"3.0.0-rc.2":{"name":"@storybook/addon-info","version":"3.0.0-rc.2","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"dependencies":{"@storybook/addons":"^3.0.0-rc.2","babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-rc.2","_shasum":"72cd5d1880b5bb5221a28520c96d843c7da54c2f","_from":".","_npmVersion":"4.6.1","_nodeVersion":"7.9.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"72cd5d1880b5bb5221a28520c96d843c7da54c2f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-rc.2.tgz","integrity":"sha512-t+LqUNn2YiPfsuCbvbwD6omwE4PYWki4Lo2+V6SqL9JfYdidWOV8lwNSfoflRAigU20vYsBT6JkcV6h1yExegw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDKS1f6j9idtRO+rkAJUf/duWJU/d+3tjnsBbx0GjLCAiBOqqFVWFs3bCGUYzimugr4pn/eNRaMLeFL/KcGC1y4JA=="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-rc.2.tgz_1495885673046_0.3431942427996546"},"directories":{}},"3.0.0-rc.3":{"name":"@storybook/addon-info","version":"3.0.0-rc.3","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"dependencies":{"@storybook/addons":"^3.0.0-rc.3","babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0-rc.3","_shasum":"d1ebf4efc55d5a6e6abc41e6755db7e4ab3a2aa5","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"d1ebf4efc55d5a6e6abc41e6755db7e4ab3a2aa5","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0-rc.3.tgz","integrity":"sha512-aIEdVYXJfIebyqHPkcy3wAaRYieOSTDHSiasiBN9s2CT3rEzlpfYuXQAg+dtNxbx5GrrA95sC3wjSJABScq46Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl3TIh2bC6Syn3xAqQymDUwEVaLiAcnPhN27VnDC6q3gIgZdVPYZumxPQ5WPGa+PkH6+I5luWIQUaPNdATFZCCjwc="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0-rc.3.tgz_1496134056174_0.37412171508185565"},"directories":{}},"3.0.0":{"name":"@storybook/addon-info","version":"3.0.0","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"dependencies":{"@storybook/addons":"^3.0.0","babel-runtime":"^6.23.0","markdown-to-react-components":"^0.2.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.0","_shasum":"84bc5c2ac9b3846f3aee182093894e8575505c43","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"84bc5c2ac9b3846f3aee182093894e8575505c43","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.0.tgz","integrity":"sha512-TvXwHwdU2uAb5i2T3osId7ozxVjXNxPidOnu4GzE3a/gQqILfEtPJZPNgYq20+oL5cYYmz21Jgh8OsHKWNg+qg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3tDjRlChIQqgcBP4syTw1g146vgi4hqMYsK3LBeb4TAIgfbprrYg4BuiU6easg3G+/oRVal528u4YvFhACS+Mrb4="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.0.tgz_1496151645943_0.7223735773004591"},"directories":{}},"3.0.1":{"name":"@storybook/addon-info","version":"3.0.1","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","scripts":{"prepublish":"node ../../scripts/prepublish.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-storybook-addon-backgrounds":"0.0.7","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"dependencies":{"@storybook/addons":"^3.0.0","babel-runtime":"^6.23.0","marksy":"^1.0.1","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"main":"dist/index.js","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.0.1","_shasum":"992d525a2cf3e5211c5d094819e13bb00e403d91","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"992d525a2cf3e5211c5d094819e13bb00e403d91","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.0.1.tgz","integrity":"sha512-j8HpmGSNL7OfrbSKVtY+Y9cZexAyE4mwxy+4Gzcb4dCQBKNaKGm+2iIJYOnlCkglR2EDdnLzvdJyUnxPanOSTQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbc5hjpSrkg3KojkROfn94usMa3jDzHL7g8/BKD2FMFAiEA7IcMmas45tivhUIHHiyCerlzoc07MLcAu+iEzca7Lwk="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.0.1.tgz_1496667546790_0.10325582511723042"},"directories":{}},"3.1.2":{"name":"@storybook/addon-info","version":"3.1.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.1.2","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.1.2","_shasum":"9255bf66cf4f40ec5108efb4d9ae6ccb7b4391f3","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"9255bf66cf4f40ec5108efb4d9ae6ccb7b4391f3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.1.2.tgz","integrity":"sha512-+glwTlLOrvyisbvwjo83GNJLCuffGTXVKbxEuRJ1ITYZWKiplMfHPof1FCSMaRNxVwz24fRFr0GtN6nUscR+/Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfhVpCd6ZyclWSaVZ51pMLKoO7J+qWycUX0haKdviduwIhAJE9nuQFIVuqLVCeJMJs+A5vyWB987xFOiP9Z6FRC0zf"}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.1.2.tgz_1497009279738_0.03966558072715998"},"directories":{}},"3.1.3":{"name":"@storybook/addon-info","version":"3.1.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.1.2","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.1.3","_npmVersion":"5.0.2","_nodeVersion":"8.0.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-W6xPd9qdlLpf+X/K/5mtuGBFH/JtYrgRLoQp7QIFj53IMCasjLmL003nlKdxdQN5ws0zAHRukGJ2XT/8jEE1KA==","shasum":"0fb26ffcaf2068a3c058d16074a899f5b15d1eb4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.1.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC1pCzR/Q+tjx99xiVHhvz+UluH55EwobD1zs09mVj2gIgIuiPwOIuxaB4E9cBHJYXRKlHV7/D9MlcdXOe5ahcu3o="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.1.3.tgz_1497095265052_0.7909435292240232"},"directories":{}},"3.1.4":{"name":"@storybook/addon-info","version":"3.1.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.1.2","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.1.4","_shasum":"74d1509a0681f7eaf03e41bf8a4c3a262c65b506","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"74d1509a0681f7eaf03e41bf8a4c3a262c65b506","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.1.4.tgz","integrity":"sha512-U2M1LrJXYXnvGdBzyeukh5PcH8nHcHrbYGSH6VWoPGuuAdLYtsPvCGSm7mhsTJJ0o49IFRUT1nFpIwYbDeWycA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPanb5jg0wezVn4XOuGgig3lTR23i6rqWMtvvtFBhFnAiBe3rfFRMuxT9axOnQr0gJKi/uXKtQgzEuKNrBykikYOA=="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.1.4.tgz_1497528514891_0.699576216051355"},"directories":{}},"3.1.5":{"name":"@storybook/addon-info","version":"3.1.5","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.1.5","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.1.5","_npmVersion":"5.0.3","_nodeVersion":"8.0.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ywPhVZVHZpOiX7x1aUhukfUqB+T9qgEIOn9TUjNRj6MMii1OKY6NNotHSIlrcXZ+mQWWj8QaKYT4LD97WF0A2A==","shasum":"8dd9fe15ffab85bbb0a859c3b08a85be3eaee2d5","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.1.5.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWNSCk1J+Ev2HgnqnP2VwQc1nB4pJcGeH5p6GK5ejVmAiBCBsiCFXH22caSERxc66ZRPtPDI2ozaLwozm4OSINq1A=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.1.5.tgz_1498113456634_0.10096717276610434"},"directories":{}},"3.1.6":{"name":"@storybook/addon-info","version":"3.1.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.1.6","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.1.6","_npmVersion":"5.0.3","_nodeVersion":"8.0.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-jaN50qAl3c+g/QQJAaNBkCpKqDPMINeR3fBbWv3kQns9ScROV8+LzU8/tvgGdmBaBlV8ou6uZoOvQOkcdRg1KQ==","shasum":"db85f9d46f5debe9e7fd3a95488fddf8a7f5ff91","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.1.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvNwE4yZrV6+9NftrEnAVooVUqEeH7omJNdN4ju8Y1PQIgVI5xw/FQ5oNqEY5ypg9aOqutl6ORXlciv2FH7E9HrkQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.1.6.tgz_1498458829835_0.8068771250545979"},"directories":{}},"3.1.9":{"name":"@storybook/addon-info","version":"3.1.9","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.1.6","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.8","react-addons-create-fragment":"^15.5.3"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.1.9","_shasum":"e2c096c27257a864ff6936a8dbca13d6a42ee461","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"e2c096c27257a864ff6936a8dbca13d6a42ee461","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.1.9.tgz","integrity":"sha512-f4RT6IgEtrIweqPLZsd9XnbGNgauJipn3ZCOZI7+0p+DRMIjmALdzvfP5gZjV74td+YDX2kHi3iWVn13sOgMVg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAN2eMjDDl4SFqHR9E/jV4kfgEOiMgnmyvBq5B2JmZViAiApT3ZsGJ0yQTDO9H8+SwqsHdh6HKM2fkpgGA7/BcOfCQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.1.9.tgz_1500238225870_0.2910029792692512"},"directories":{}},"3.2.0-alpha.8":{"name":"@storybook/addon-info","version":"3.2.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.0-alpha.8","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.0-alpha.8","_shasum":"65355ccdaa0544d3d2cc42f1c21eab5cc202ca56","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"65355ccdaa0544d3d2cc42f1c21eab5cc202ca56","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.0-alpha.8.tgz","integrity":"sha512-jcb8ChqtMtRrRZBuXknAbAEsqLAD60NriOZa2ORmxfNoGhKxqsND8xmubpmw9FC0me8mZj4TqoQ9Q6pfNcBr0A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIx0ITS6DNuget4DLCbWCJioAIqwEp3RI8UUFreQz3zwIhAIIz9eoldEf9Gc4ewbdNMtwWUSmUf/0xkEyfyFhNwAK/"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.0-alpha.8.tgz_1500582642461_0.3999822069890797"},"directories":{}},"3.2.0-alpha.10":{"name":"@storybook/addon-info","version":"3.2.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.0-alpha.10","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.0-alpha.10","_shasum":"2baf773a0f49dbe2d823ed68377ddbe82bf61634","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"2baf773a0f49dbe2d823ed68377ddbe82bf61634","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.0-alpha.10.tgz","integrity":"sha512-AccmmcC40RMhyzmSmYYiXNZ0fMGRMTDM87H+ThzQ3FekFjk2GnvDd5O2actz/wVU4d8A1WxaQDZJZj9fwxddqA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4txq4vJm9wT+KJC0VgQI52IcUglqiKQcE4VJIoCNVCQIgAxggat412jreAzCDGpWUSxT76t+ENlMYrPS/wmobhUY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.0-alpha.10.tgz_1501142867949_0.731805017683655"},"directories":{}},"3.2.0-alpha.13":{"name":"@storybook/addon-info","version":"3.2.0-alpha.13","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.0-alpha.10","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.0-alpha.13","_shasum":"e8f100cc61fda2aa8bc2172c18a473a2ed665499","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"e8f100cc61fda2aa8bc2172c18a473a2ed665499","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.0-alpha.13.tgz","integrity":"sha512-gNJMxzodIRrJEK+d+lCDEpFbU38c/LUL5sCMRtiDjfBJUKEWUdhvRLv5P044nEDuNVKfU70LNoHs6xmLLI4W5w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmHh9mr1zU7phkCyfOwvL2XdDhqPLL08yRTxVDENFT1AiBVe+vE/D8CJXDep4TU+1GCYUs7RKWEEud6X7AOcGFt7Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.0-alpha.13.tgz_1501460376694_0.9506408357992768"},"directories":{}},"3.2.0":{"name":"@storybook/addon-info","version":"3.2.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.0","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.0","_shasum":"0036b947464f6f1a657b14ea4d0f070546679aab","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"0036b947464f6f1a657b14ea4d0f070546679aab","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.0.tgz","integrity":"sha512-oKnoIqIEbGAF0/+m+DRJyCSIJ4HzQmf7BnAamE3kiWIushDQX5Q8QsslNxt/bY7keDwVOfPX6zEmCeblj90POw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChJIctKwajvtwOwxRiv/9wselidEq7v5Gg7wgZyUBpFgIhAKPylQwvaLpjfCZMhu2rwcoNvb5Yr7X02HpAnKCVDbFT"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.0.tgz_1501510401271_0.8727111942134798"},"directories":{}},"3.2.4":{"name":"@storybook/addon-info","version":"3.2.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.0","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.4","_shasum":"206bd57dd6ccfc50a61d80ef17f4c1c9d8c703c8","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"206bd57dd6ccfc50a61d80ef17f4c1c9d8c703c8","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.4.tgz","integrity":"sha512-JigFkb4Ivrrgf7tJyAqQiMw4iYRayI4uCtNBVaO4Sfss2etV9kdT8TzFo+h1nXitXQv5YWDV9xSGxeqofRghwg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI+5le7jP8Us6e63521zuvoeP+6RhtU3LsaCXN+gYGggIhANMdW2gS6wCX1MsDJEeRCH7XaLjmy8vxQu44OSA2Te7H"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.4.tgz_1502582376604_0.5996766514144838"},"directories":{}},"3.2.5":{"name":"@storybook/addon-info","version":"3.2.5","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.0","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.5","_shasum":"640ba74c8c3099c810519f5d9fe9440215ead785","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"640ba74c8c3099c810519f5d9fe9440215ead785","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.5.tgz","integrity":"sha512-oyh4j9L/XEb5fMZK2ggog0bjf3vFV44yaCiiAuIBpSdtviyFAG4ASi5AnYf34SmT5hVmSkrHVjUdLDqmD5PZEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5qG/rFCZ+WOmwUjxw1a5W1Jz0Vp/UU5EFOKE8aVZ4HAiBuvFeFO821+dhFtyKvWwQIJTZFV4H3wtdoi5zH/52bGg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.5.tgz_1502945467277_0.1319487295113504"},"directories":{}},"3.2.6-alpha.0":{"name":"@storybook/addon-info","version":"3.2.6-alpha.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.6-alpha.0","@storybook/components":"^3.2.6-alpha.0","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.6-alpha.0","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-OdeFvXk9NkiniQtCi+KsahTYMvaoetLXxKwHeOFzrzJJkm51iMijb7i141Y7nC1aUCQyUJEjOJpGNMj/zbysOw==","shasum":"6e0e45f7edef7246eda62351a5b0543d580c7302","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.6-alpha.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3cyqY8BX+C2FMJ1qQpAPGYswFUKwSrWJskCUP+oUViAiEAxnhd/RCOYhKXCLWJ6f4cv+MfrI8ktbDKjLf0N6eA1bM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.6-alpha.0.tgz_1503387179938_0.5762880323454738"},"directories":{}},"3.2.6":{"name":"@storybook/addon-info","version":"3.2.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.6","@storybook/components":"^3.2.6","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.6","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-KOl59/MNGcboSEJxKRrO1trpcJ9dZV5Fxqxo5etQxo0m3GK0fMXnSye5rTojHtCenWcaJy48oxrrhJHcHBDNmg==","shasum":"38e7bcb1365fef27d163acdabecbbbb4f0e9b210","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP1tLq7Zk4sIdu3AAl0EiDMcrAeCTvdOuJBroEtg6f9AIgBu37zHmDoIvUHHH6dfITP42iBQEPmyKBTEYKdD2bj5A="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.6.tgz_1503425002852_0.9358384828083217"},"directories":{}},"3.2.7":{"name":"@storybook/addon-info","version":"3.2.7","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.6","@storybook/components":"^3.2.7","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.7","_shasum":"1a12a4b6cd79747d706c223842c22b7442eafe85","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"1a12a4b6cd79747d706c223842c22b7442eafe85","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.7.tgz","integrity":"sha512-DpQIoP8dTwPrk1Ai/eVq+BAhDMOi64jh395a6rppZuygGeHgiR3bq95AtBJLrgpFy9uukzhVeeVZAjb/Y2oNEQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjrMcWBLJyVHQNU4L1/SkBgeEhFGJfAAvvMNoy119jEAiA/bFX0qKThK2Zl8skrMsOx2eYq8q4ISbT5YNEi1kD3kw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.7.tgz_1503505460119_0.9309224425815046"},"directories":{}},"3.2.9":{"name":"@storybook/addon-info","version":"3.2.9","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.6","@storybook/components":"^3.2.7","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.9","_shasum":"50daca12d216f8338843023f13030cd92ab9789e","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"50daca12d216f8338843023f13030cd92ab9789e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.9.tgz","integrity":"sha512-kggNi+7Yrut1SDIkyhNZCIy8epUZB9Q62zcpml6NL/lvdJc9R2mC+K1HKZxu5z0M0AzykSJK15bCyzUdzBRgjw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHw0UOBgf3q5boRifauDgfSHO/SznUaxFlM96fNzYLdEAiB6bZJTAWaG4aWHKPywYhped2CziFxvdpmbfdAqmfp3VQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.9.tgz_1503763000793_0.8451537399087101"},"directories":{}},"3.3.0-alpha.0":{"name":"@storybook/addon-info","version":"3.3.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.3.0-alpha.0","@storybook/components":"^3.3.0-alpha.0","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-alpha.0","_shasum":"569e505e77fd38fd1a18f2ff62bdad5ed84940ac","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"shasum":"569e505e77fd38fd1a18f2ff62bdad5ed84940ac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-alpha.0.tgz","integrity":"sha512-iUC6RfNTl88YN2HprUibrnD88be2TNcfttM1INrt9Q9dYZMTxZbUpJRJYe9RcPVdYtO2M671S99zaqbCe8JUoQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjco9cjJ9JDfLARbNBl/JbcAVttRweObBoIeAr1jCyDAiEA1SyZfcUUrLOWvvU6rj/BmJU29SJH2kNl0n4Rm/K1dXs="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-alpha.0.tgz_1504730820914_0.2304623902309686"},"directories":{}},"3.2.10":{"name":"@storybook/addon-info","version":"3.2.10","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.10","@storybook/components":"^3.2.10","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.10","_npmVersion":"5.4.1","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-lIb917eYx6XBnSn9GJMHXTCFGM4HKCmr/oQ6zAzwWN4nd4Eq94U6cP+otHa5WQBZ/RWEOqiy24bN2InIexs4Bw==","shasum":"d443b4e81e8e7c2c3858bf59f74f7df649ff2ed9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.10.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqRqLU9i/eBT73BGbKKYvgPo5W6cDE6w7JmuF4iRrtvAiEA6oK4v1b96TyIdEMbCccOrIkaBmurrkf0TI4/N1XibPY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.10.tgz_1506116601065_0.32357842312194407"},"directories":{}},"3.2.11":{"name":"@storybook/addon-info","version":"3.2.11","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.10","@storybook/components":"^3.2.10","babel-runtime":"^6.23.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.5.10","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.11","_npmVersion":"5.4.1","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-o/Fe4qnjaxDV4e12ID+voDadVKLP5AsnSVVIOlIz+828O/wQpIfeUKwvdJCdLIDNwKG2xBiB+LJVH+nzaM73XQ==","shasum":"303a103827b398ec3330d0d6c3726b3ef06e6b00","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.11.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUa1TLmTfxKF0pcziJhtuVi3VMmhaDwR4TXZ/g24AGNAiBvbAUkU/x/rPTu/GvMtURfb7U1ku5oiw3lRDwAu15QLA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.11.tgz_1506466435363_0.5862821019254625"},"directories":{}},"3.2.12":{"name":"@storybook/addon-info","version":"3.2.12","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.12","@storybook/components":"^3.2.12","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.12","_npmVersion":"5.4.1","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-y26PbKy/8t162q3fRhe/NklziZN9wKbjxAta/OF3VSBnm97uDZZj7rRikVAqWoe+2oX+uwEvTpnTeIIcuUDWuw==","shasum":"0600393398590dcc64fc1d24e509487f424e8354","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.12.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCH3HspQBLCmUlKbpBnoUnfyLzSr+ryhA9A9G5oVyihAiEAqymc09hraXhhzPLneMHbmhS5w0RkOttukZNhcZmihlk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.12.tgz_1506983483361_0.5455732049886137"},"directories":{}},"3.3.0-alpha.2":{"name":"@storybook/addon-info","version":"3.3.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.3.0-alpha.2","@storybook/components":"^3.3.0-alpha.2","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-alpha.2","_npmVersion":"5.1.0","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-5a+HsOzuB10jPJs7EA1DSc+BniV5BmLEHkOM7uIiT407vdO7LPaWGWzT3nGsg9UsHJLKnZ88gPOSpsdVfPPZwA==","shasum":"c60d600feb32c5089ca60c3546ec3f3da9b5f294","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-alpha.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHheDVC2le+KG5azZskOu18GZgEDnRwW2zRs//WgNb6NAiAaw9YoE17KWSmMsNbReDMlD6TAG/HXCzrB4BFBDMIsVg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-alpha.2.tgz_1507061535856_0.22025972558185458"},"directories":{}},"3.2.13":{"name":"@storybook/addon-info","version":"3.2.13","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.13","@storybook/components":"^3.2.13","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.13","_npmVersion":"5.4.1","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-vpyvnWGfgaS1G+ROc31kYsA7vwh+PIV0Xd/0eb1/hWbnFPNMdiq6B17GwjtWBg1zgMuy6AUkg5y51Ylc/oUsyQ==","shasum":"9b2ec64f497cd19f85447aeeedb12b7c2fa307c6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.13.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAT3aRmhDE9hcE1RanSU9ix42bzcWQqq/jegS2ycg/gjAiEA0DQ2z+AWv+dOCGxVbe0iwiAovlAVh8KQRKPRsKoPjzM="}]},"maintainers":[{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.13.tgz_1508528745676_0.21029542898759246"},"directories":{}},"3.2.14":{"name":"@storybook/addon-info","version":"3.2.14","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.14","@storybook/components":"^3.2.14","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"git-url-parse":"^6.2.2","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.14","_npmVersion":"5.4.1","_nodeVersion":"8.1.3","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-vouas3lhtGqxiM/er3eykTbPBsoMGo0dBQme7w0xpG2Ryho5p/Lwtopy35JlzskKAcHYZc4AexT00v19gYebSg==","shasum":"9c4eff70a0319cf25fb367564fc1a928ad81323f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.14.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjOTQcIMchXirD979y0GwZKb3LzqLyQi0Bed9X7G0CwgIhAN3As3Swk3bk09KcMU9lx9iwvhid6f3rm3AxI6JlFJmA"}]},"maintainers":[{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.14.tgz_1509520943205_0.03773110150359571"},"directories":{}},"3.3.0-alpha.3":{"name":"@storybook/addon-info","version":"3.3.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.3.0-alpha.3","@storybook/components":"^3.3.0-alpha.3","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-alpha.3","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-0Pu5fYU+W/UM9AoAcrlIki19Argr0yKb+d2D3xpXei5vdm/m8GLvioTwbcRD4pEjsE8FPcE1748Q8c26MLA/8Q==","shasum":"6b333ba2ec7cb2cac598a3926230190174da9e50","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-alpha.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7/pR8myej9SNxDcWyRbvQlZZ2IfPkoOAlVVaE1kx75AiASr1M+tT8cMT/nYQK92Ufipl/8NGpKKGEXtQXFtW9gcQ=="}]},"maintainers":[{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-alpha.3.tgz_1510027074559_0.9427366519812495"},"directories":{}},"3.2.15":{"name":"@storybook/addon-info","version":"3.2.15","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.15","@storybook/components":"^3.2.15","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.15","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-+FZSlD2zliMBvDTBbjVYqim7ehGxgkJyViu5fV5y39HvIJYdjSnm6zguk2tNqg0vO5ldP1+ganN7Clbn1iMB2Q==","shasum":"bc310fb54801657a687329729ad9dac426f6b9ab","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.15.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4IvxiUto/PTlugF6ZPpZsmFmk988C0jD3E9cK3VgaDAIhAPUqr+2+unLBF7nXfBKzlsSH/Qen8iVX5XsX6xEFbF6V"}]},"maintainers":[{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.15.tgz_1510281658745_0.472535538719967"},"directories":{}},"3.2.16":{"name":"@storybook/addon-info","version":"3.2.16","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.16","@storybook/components":"^3.2.16","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.16","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-6/kmhuB3VJedhKI+CueYgB3jdkQQvprlPLQA2ckzFexsBs4kYtKh7qqGtIVdjnZmME1IMXiEZUuPpEZdqLNVDg==","shasum":"22fea6a6675fc98e333b7d748443c36bf7b322f5","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.16.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBrZRYsjzzJiQODaNItpCwJiE2ZVweDxKpSnWIx7RfRAiAEPj5vMLISKMr4HsUcPgD+Ic9gOTlbIq1eLX1Z606FZQ=="}]},"maintainers":[{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.16.tgz_1510797865410_0.690140625461936"},"directories":{}},"3.3.0-alpha.4":{"name":"@storybook/addon-info","version":"3.3.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.3.0-alpha.4","@storybook/components":"^3.3.0-alpha.4","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-alpha.4","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-mGeANQaUzKxDULyTrNMTWknp7fhelOZAE5t7sKrrOmqmq4ovTYb9mJyg5s0EBD3t5KRC7LmyZhTwgWqqzbTz/g==","shasum":"df66ab4b90c28342aa905405f25506173edd4f9a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-alpha.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYMzSZott8/rqe05CDvTddWHZeQSgoVwyltqyHdyjB9gIhAOkfYrbpqEOHYA7I77Enk+jGQl9LzB9jEl4C4jO/ZZZ0"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-alpha.4.tgz_1511349378990_0.22751551726832986"},"directories":{}},"3.2.17":{"name":"@storybook/addon-info","version":"3.2.17","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.17","@storybook/components":"^3.2.17","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.17","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-MHZv/lam+NYyibOIRly+66GPSmlhrGMDlQaZFliXYILQuF6skN4KeC/A7IkhquAUVA2PrkBS8EJfTAV0Qw0pcQ==","shasum":"a1a612ca323c360089dd4d49aca8abf902d4929d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.17.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZ3TYTYb4hAcqPWrI2gYuS8B4N1I7KxeC4PlBtGpKRhAiByZi/80CWERNIaCPKn5t7WTAJafciGfya6JZsOyi1ArA=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.17.tgz_1512331189406_0.8798639124725014"},"directories":{}},"3.2.18":{"name":"@storybook/addon-info","version":"3.2.18","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.18","@storybook/components":"^3.2.18","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.18","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-InEJmMUgWHpP4O0Q+Wq74p/K28cNf6qcW6LriOkYvFqES6p1LdMJUvbRoblpQh6T5gI88weGVS50+wRDLBKCdw==","shasum":"537c81b03952bca032d3ab39edf18723da7ef099","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.18.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0LiWZ8q7wpJj1/ykjfatnsaZ5Hbi36wfPm70mcwtPcAiEAn4OCUhFlalTPf3D+9Wq8V37rzlb0S+b0Aw/pXAL18iI="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.18.tgz_1513634377509_0.805197119479999"},"directories":{}},"3.3.0-alpha.6":{"name":"@storybook/addon-info","version":"3.3.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.0-alpha.6","@storybook/components":"^3.3.0-alpha.6","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-alpha.6","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-pzJlcL43Qxx6SdbiOtoZ1DNXMcl17+Gac2diylXiErlIkcA4KAUvzLBEG+qXtar+s421PX6LemNXkliegTgqKg==","shasum":"ad8319f39f446fa0913acc019e035267caaa5b04","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-alpha.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdnz2EqhS3aJDxFOWHpPkJaAJtlghCMiOr9ERQAdui/AiEAsTw99ipP2xjjSIxQxmOLPvXuSI72RV+ZfoEIaUBkQJ0="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-alpha.6.tgz_1514050015966_0.10397874447517097"},"directories":{}},"3.2.19":{"name":"@storybook/addon-info","version":"3.2.19","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/addons":"^3.2.19","@storybook/components":"^3.2.19","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^2.0.0","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.2.19","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-dNpguqgMP37IY1nxfR8n287xE7IZlbkcfkrDbftUtsW/eMkmjE4JbYmfblu+J39q9ulm9yG0V5us5oD3Y8tAfA==","shasum":"dfc0165ec49666c5d533f4019b3b24ad02600daf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.19.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcl0C4EgkHoqf8Spqu8Vg7YD++1MNcKUVphmV6BRH91QIhAIKd8d0L8BdqpF19MBcagiuUSdOY5/v1UXS+Q6Jk0are"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.2.19.tgz_1514051965476_0.05184577056206763"},"directories":{}},"3.3.0-rc.0":{"name":"@storybook/addon-info","version":"3.3.0-rc.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.0-rc.0","@storybook/components":"^3.3.0-rc.0","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-rc.0","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-4iy0o3YVxmL/d6BBXX3qFXpig9NOmPTWfVzaMpgW72LT2bygjdoMBuU2aMqpIIPipN0vrlLexp/9P53TzwBkTA==","shasum":"7ad29dbff0850f75797825a3696aae4df023bf86","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-rc.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4Uzd5SuhLBeUcyS82g5/TWNW0WQE532/+ah3BsfrfTAiEAgtXWLrpmZqLHMgqkoHbCXLu+2p7oLXYe7lJzCh2m8Cw="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-rc.0.tgz_1514089301187_0.3901350926607847"},"directories":{}},"3.3.0-rc.1":{"name":"@storybook/addon-info","version":"3.3.0-rc.1","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.0-rc.1","@storybook/components":"^3.3.0-rc.1","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0-rc.1","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-wIfrsmQPbz66N4mJnaOV4V4ZOas+TqY/erlf9QK9jcSCyWc+P8CxoLHoYxDCh/xFBWJftjN6BDv6T1kX6Gmuvw==","shasum":"af300c84561f37b5f52117f38d8c517df398472d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0-rc.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHp+F2Dpot2xsrbBDJeKigdSaKzBS4GitC/PexozmrbQIhAOYji3ppKlAL7S+esehL6kKET12j1koE8vFiyXZC+9CK"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0-rc.1.tgz_1514310618810_0.8283492315094918"},"directories":{}},"3.3.0":{"name":"@storybook/addon-info","version":"3.3.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.0","@storybook/components":"^3.3.0","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.0","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-bbrgC1i67+Npjm9zxTnTZQcm+6oraXDYsDyAQAgDdbd6ngMoULCtWmSsFLyla1o65/C/GDcD+9S0k2j7IPyv4Q==","shasum":"2283c7cf380dbfc4146b1f2b3b1380898844d5cf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVTC9vA3kpQjiuKj6k6XQlRLzfzjw0zTOBswEHGamIpAiEA5Vdh9C9aPv5XSVApooHSz08T1uoB8Mu8OeHX/jlCk6k="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.0.tgz_1514332743832_0.1365752648562193"},"directories":{}},"3.3.1":{"name":"@storybook/addon-info","version":"3.3.1","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.1","@storybook/components":"^3.3.1","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.1","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-CPgMJ5ufWYqAQMOISY9mPTAD9RFUmdOzaZ4v/TvHfoH/sa3frsPNiwVS1CoOgf59o5DVKKi5SHKQ52ryJs8Xxg==","shasum":"04f6be31df26847d6f64c11de201591972adc232","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBShv1qizb5SpAEq+uRGTj0DbwN+6rueLfr5QvrU2RAxAiB8UByiuq5TNxnhjszqTyckl9Fo+pwPsI09s1BX+ENFDA=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.1.tgz_1514345492019_0.37813109438866377"},"directories":{}},"3.3.2":{"name":"@storybook/addon-info","version":"3.3.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.2","@storybook/components":"^3.3.2","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.2","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-pvYBWvKSMkvYyPJSVbKUYLhW4VwlkMrY/NFUsmZT7zUvwz7GF06Fo5SqWDXYNNq4reDVu/7mXsD7kOPFeSEz5Q==","shasum":"f38d2b4b94e0ae1ce0e1fe127c8f80ee27a72acd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRbQx4oue1+W6S1e5qXB7zLaxDPEaw8w5CmjkCSnL+hQIhAMO+uvTUtTiTJXCaxBTnh3PBFsxRAKGlhy/yuMssK+Ya"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.2.tgz_1514430738390_0.41576535324566066"},"directories":{}},"3.3.3":{"name":"@storybook/addon-info","version":"3.3.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.3","@storybook/components":"^3.3.3","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.1","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.3","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-UVaICw6KDkF7UKksfwiihxYs8VIeQvo7hUU2Ht9DM7ALdcy9G26mlOzTI3OCooMonIXoE0Em1vaDFdZTcZijtg==","shasum":"87f9375dcd74a752bf84eef8798f31a3636f644a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfNCKhtgS1Ydndo9469FSbothrk9JjDmnPCuh8xe12OAiBb1roQkvaNFGWzVlMKI+N41rfMRdLGoc4yitj8NG9gqA=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.3.tgz_1514480857469_0.8927172783296555"},"directories":{}},"3.3.4":{"name":"@storybook/addon-info","version":"3.3.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.4","@storybook/components":"^3.3.4","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.4","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-vpfz3dlY2sOVOpZsecERUzrYwYOl9ZzsN65OWYwDzfhWcnl1ErD5SHgwr1fI8rFX6pC9wfnkNieLtmlcu5NJjQ==","shasum":"577b766769138a704591f87db93b196f287a46ac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDYHUkk2Fk0XTFgK5K7iwpoIajFfmO0fm/F+TUtkHe+AiBq1KWzdxOAiS7U/vJ6LQVM8ZYQ+VlxZwMQRiCT4FM7UQ=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.4.tgz_1515329797240_0.014298527967184782"},"directories":{}},"3.4.0-alpha.0":{"name":"@storybook/addon-info","version":"3.4.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.0","@storybook/components":"^3.4.0-alpha.0","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.0","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Khvefmwl1CJd9ngUpL0ic8Wgkmdmm/oMGommZjmUuLdGWAvou8hk0joM0hW9vz4z1kweusj3OMWVB9ZtQvBNbw==","shasum":"bcf972c4b1a0ec21f01a8edcca2f40fe356ee412","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB0GkfTw/XuGjaQAajhgs2CrymPRA1ZMChRmPFxF3q/gIhAMphY9BZNUgm4srRMH77wIBYBerHPydNLCD3X89QU+P+"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.0.tgz_1515341157939_0.7554893121123314"},"directories":{}},"3.3.5":{"name":"@storybook/addon-info","version":"3.3.5","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.5","@storybook/components":"^3.3.5","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.5","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-TaTotfjZ7oR7to2bvmDs3aXLVwpxk08DUP4MO9SeN8JQbJ/OWs2gVCw3t/oPbZiVbT3jhYyJIJE/WAdNwjKpxw==","shasum":"c9ad164149691d1699313af5e1731e5f339746d7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.5.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCurrGQgaM0BQHtJv1w8BjawhksIrSAIqGH9JzoFWHdmwIgV1VEVZ++2h0GR5Npuhtn79HxmD7vrhr4JE9JNZCMX3o="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.5.tgz_1515383017025_0.06600555963814259"},"directories":{}},"3.3.6":{"name":"@storybook/addon-info","version":"3.3.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.6","@storybook/components":"^3.3.6","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.6","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-gMqMAIbEqmZsyIgOr07azO6PjTbzsZKIJe5h2Hk0zJbvtu9Rsn280CB87sM3vubD9ORSQUx0jX4s+HyYyy+WaA==","shasum":"b5c1645488c5cfd5404d90486bf45a00dd5b7a20","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICm8/3pIqEa0DVK/WAZ3pVV2tXrjzJEsGcng/iMgggkYAiB2kKamYdFvEt/CxPToLSVeUqy7E+k/EBmtijTwoW/7Jw=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.6.tgz_1515408206239_0.5071875404100865"},"directories":{}},"3.3.7":{"name":"@storybook/addon-info","version":"3.3.7","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.7","@storybook/components":"^3.3.7","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.7","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-stJNOlRgMMLYF0w6jubEpWLgIlUczkDLWSe8q+NCkrbsZ7CLZgNyHI7qdqGCNcdA3OQV6hJhxcLQZIDy30pBoA==","shasum":"d9c08f817e7cd51d75e1ede65ec74ff150d6a8c6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.7.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBB/Ug7nTA8hBYq0PnkYKmNa9qv0ReapWHrXAYdyh/8YAiBQoB+z1K5bdZYLsAUMPLiCjEQGYL5tW50Qv+OEisyGJA=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.7.tgz_1515566236615_0.9929957480635494"},"directories":{}},"3.4.0-alpha.1":{"name":"@storybook/addon-info","version":"3.4.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.1","@storybook/components":"^3.4.0-alpha.1","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.1","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-M1m1310WBDGGGApc8qVqlc4ErBjFFCs5HZl299GW0W4YVo1BIQs5m21ZZ9cgt/5B1WXPxkX5i4h5BvwJCcIvcA==","shasum":"3ad3c5895c8be7f84d2ec68a0672b20b6a977210","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwW5a5pWIksYQveX4KTJUueIirIU9bCftsdQQ8OjKnlQIhAInX8LQNT42vFqYl08smApkzL9C7CIEDSFsZYImYApTY"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.1.tgz_1515568207496_0.7548261838965118"},"directories":{}},"3.3.8":{"name":"@storybook/addon-info","version":"3.3.8","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.8","@storybook/components":"^3.3.8","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.8","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-uMyflIQPb1Qn428a0vZDMt+B/r3m9/MHE7TrF2d9MYd4S/iXIGOibGfMuzMqfZUWucPg3Vs5fhNJNkw6zfbLIA==","shasum":"174ebef0bcdcf4bc76fa44963c818b55a3a09429","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.8.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkCxOijQx7S8kgevz7gnS5PLOdClIMJZPkXaRcfwOxwwIgUlUI4pHbSk2khFB1Bx8Ia2BX9rZzmBr9051WU9zVDPk="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.8.tgz_1515673140749_0.45555795705877244"},"directories":{}},"3.4.0-alpha.2":{"name":"@storybook/addon-info","version":"3.4.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.2","@storybook/components":"^3.4.0-alpha.2","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.2","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-/a6O3jdyvN4gwZssgpCoHxU62BqJV59ZGGFW/QX6pzDptvO+OVV6IS6/IRUutl+pUsT2zf0BI8CwcYBhYon/XA==","shasum":"3f468957eb5eb6fecc1a1c4d33dbd9ab32169f99","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnOUo+Fzb9YB73OZGgv3O+Fu7x6bEBMSJtssn3SZIhnQIgNvE9dukqGJ3NaOwNSI8SUrgM4EMSMcWYYFQerUTO6dw="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.2.tgz_1515674867237_0.024568006629124284"},"directories":{}},"3.3.9":{"name":"@storybook/addon-info","version":"3.3.9","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.9","@storybook/components":"^3.3.9","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.9","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-KxLWATWcXSilHs++XTdl6V462OylbOgpjboMj2Ax2owXEx4JjAMfKdvQmU8T+aaK8K/+7RyIStoOxXjvQRx3Sw==","shasum":"a8cf44b67c2dc6cc9731570dc3f4616d8cee9c06","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.9.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMjRcwEFpGGww8kDrWro4b3yFx9VKfhYiC0Me5kkqoLAIhAOFT5KSPwGkJJqs5571t2rtyYyP8EbHxhvoGP+SrBfkU"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.9.tgz_1515829156257_0.38645886187441647"},"directories":{}},"3.4.0-alpha.3":{"name":"@storybook/addon-info","version":"3.4.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.3","@storybook/components":"^3.4.0-alpha.3","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.3","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-kDbYkwHfNChj+DSsTLuAs1GQeNzfidG2DXJtfTP8bwwfqbTObar3ljDyXgj6lnR+ka25x7IsoDPv18kByzzyig==","shasum":"870ce5e1e06b2456840a67500ed3c21ebfa2f7ac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/Lxv88rom3l6LV+ws3zcF65Dyp2IftYTVbz+JsgtWBAiAh2L7mtPRWIWJifGQR6aKEVkVLxG7dVXrke318UsP2sA=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.3.tgz_1515847369563_0.9360072161071002"},"directories":{}},"3.4.0-alpha.4":{"name":"@storybook/addon-info","version":"3.4.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.4","@storybook/components":"^3.4.0-alpha.4","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.4","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Mes4Z3D9h7a+AyJjhxqeBCYgVfH+RQyvZVTgYWc7V+3+HG1tnahZ15wpwxqhZEirF8qHzQZo2vbyn+Z6/Am+vA==","shasum":"82469b69d3a82e5fe80cdb3081e5dc4c105800a1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDLyEQM0jcXpnGDwDfZu/0qRF0yho7yacMql4l74SKngIgS04EzGZjgDDH5JEU8SersIEzR7x7/B4PrEG1s9jDuoE="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.4.tgz_1515848741986_0.47513113752938807"},"directories":{}},"3.3.10":{"name":"@storybook/addon-info","version":"3.3.10","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.10","@storybook/components":"^3.3.10","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.10","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-qPShg/PB0dL7RkehZHgd+0bfjHy8wzWfGTFnF5cfHI/l0leW9eHfpVLCujTR9F138trBMJYXU9oJeu3AH8bIhQ==","shasum":"9d400cba8ca08320b89ea16e36feeb532b2d3f9e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.10.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZAAEdZbzQ4EVPKXcUCHUpma3eWGY/NkdZwBNSU7U4+wIhAO5PoCEdzQ79YfAI4ZV64fY8jThulMcgq+8M6R6meMl/"}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.10.tgz_1516361334187_0.7566949590109289"},"directories":{}},"3.4.0-alpha.5":{"name":"@storybook/addon-info","version":"3.4.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.5","@storybook/components":"^3.4.0-alpha.5","babel-runtime":"^6.26.0","glamorous":"^4.11.3","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.5","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-D1twP1lX5nTSONpEmEVsV9VzETG1DvL2XfZWLDtxIYdPoLKMlfsAwoUiRLuW2LSZmYnEgouU9DM3QR2WIVbmaw==","shasum":"a4021e85202868136a031edf939af72f56e77567","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.5.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXwA5U7gffczRBX6C3ZtDLRLGmCjGZaWbmjF5Fidp0rAiBgGT5vQP5Jte+z25z5K7vLNIY7ph885RauuPguXO026A=="}]},"maintainers":[{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.5.tgz_1516366409935_0.29614239861257374"},"directories":{}},"3.3.11":{"name":"@storybook/addon-info","version":"3.3.11","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.11","@storybook/components":"^3.3.11","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.11","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-GaULaB531Azioc+5N6AGNtByyrl4P/mKnA/l5icYbKawDXP1x9HASEytdtd2d6hTtxZtHM61yOVW868wNIuxnA==","shasum":"865307ed6ccb8cb3c0e189779d12f31b9adde683","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.11.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTSodK1fngHyX+d5tsgpdQoua725wmJpJS7WitvmivHwIhAJh9cCf2HB7XgseT/f45S8Ze3wW60//T7tvZdqAlG2bD"}]},"maintainers":[{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.11.tgz_1517035292591_0.5706404284574091"},"directories":{}},"3.4.0-alpha.6":{"name":"@storybook/addon-info","version":"3.4.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.6","@storybook/components":"^3.4.0-alpha.6","babel-runtime":"^6.26.0","glamorous":"^4.11.4","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.6","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-krPxQYw2dx5A7XkM5IVkb4Zs/Y1N/6CcMV9hpjepLlV36FsfvObmhnfey7DFTRIrIXaMM4rkX4Rrx5+m8ozGiw==","shasum":"e21fb363114ecaf20b1bdf81ffb3794a83ac984e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnDXLFA+tFFTT0AQK6fgafigZoMMn+1sHQV3mNowIFqAiBLAyDdVTU0awk+17euORLxsc6LZw8dth4xqjxMm3zc8g=="}]},"maintainers":[{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.6.tgz_1517037428504_0.19556019944138825"},"directories":{}},"3.3.12":{"name":"@storybook/addon-info","version":"3.3.12","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.12","@storybook/components":"^3.3.12","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.12","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-WAUgw3TgvHgd+OdydQgpjXRTRW+0a+UHoYPNrmqDFWdiOhcTO2HQHfe3X/wF3w6gY1nUX2dn4uHts8n6fblX1Q==","shasum":"3ef8ccbf5aeb7cdd32a0c1fce07d673da4cfa7ca","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.12.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDs7eYqNKt+otOjEj07iDA+eibYf0NAThJdOb/EEMIWDAIgdyeYkwmw6tY0Mdvkar80bW3vfPj4bmlncSRXJQMCbv0="}]},"maintainers":[{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.3.12.tgz_1517624658000_0.30703416047617793"},"directories":{}},"3.4.0-alpha.7":{"name":"@storybook/addon-info","version":"3.4.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.7","@storybook/components":"^3.4.0-alpha.7","babel-runtime":"^6.26.0","glamorous":"^4.11.4","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.7","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-xNA1MxHYh1Fq/G8k3OJDlHq9J3PfNoFjC3TVWUIwPxiC03uzTSeSWrlieInxyoC2hyDzMr8zZIka2unFUiJMVQ==","shasum":"a0c6c884de0f477a9c1bdc3a9ddbc332e5b9e25c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.7.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtn87+D/zDLKWC/uJEUyi8MjAJoEt7txEU98T1S39vSAiAIoXU2iaBwEn5s2Wn6WkkpO93DGtlKfu+PBThXoLTbjA=="}]},"maintainers":[{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"michael@lab80.co","name":"shilman"},{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"regx@usul.su","name":"usulpro"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info-3.4.0-alpha.7.tgz_1517626547345_0.13414875394664705"},"directories":{}},"3.3.13":{"name":"@storybook/addon-info","version":"3.3.13","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.13","@storybook/components":"^3.3.13","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.13","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-eyYXxeJgs5d6WJH+JZmbPHrZstb7TQwQxfEIFLgS8Xxq3PRUXD9P968csrDKLmU2jhtruJpqhqyqSFqym4oOhA==","shasum":"b8e2c561ea7aed1a9c333b21889e404663e4f423","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.13.tgz","fileCount":65,"unpackedSize":359373,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZ6/ewUbNTVJbHAWGfyN+aOrm0uOSTCXwQ3kGdNDnR/AiAxBgbBh2SOs5f9/q+qaB+3nWQuKRu8/Sc5kBwBbEE+LQ=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.3.13_1518329606078_0.46549685401405516"},"_hasShrinkwrap":false},"3.4.0-alpha.8":{"name":"@storybook/addon-info","version":"3.4.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.8","@storybook/components":"^3.4.0-alpha.8","babel-runtime":"^6.26.0","glamorous":"^4.11.4","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\nThis addon works with Storybook for:\n- [React](https://github.com/storybooks/storybook/tree/master/app/react)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.8","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Ntha8IEOEDO5unpwg520yj6c1+A9reRN2myaexaRwaudEefN8fx/R/UbNMmaEOu/JPuqRRn28zr8aVPHxvPqeQ==","shasum":"c414f77d28cec6400a178a5b87a51275b0c7a609","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.8.tgz","fileCount":70,"unpackedSize":408643,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDphwy0zoppoZPvpXgKOI9iHnt3bgrlnShfaKx1tB4zBAIhAJ7FfmTK7TTd51UVD5cyZ/1wWLVXpS/owGbUhkI7ngUs"}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-alpha.8_1518332300260_0.268471496416705"},"_hasShrinkwrap":false},"3.3.14":{"name":"@storybook/addon-info","version":"3.3.14","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.14","@storybook/components":"^3.3.14","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.14","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-UbGJue0PNpXu10oJidS1Y34WkiTNeoEDH8Vq7qzSiEYOpdq7Q/pg4GjWG/FiYuD9fREQ5grCiPcoKVih5j54Eg==","shasum":"5d43fc4acb7fcca030691f3f53ddf73647a1c386","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.14.tgz","fileCount":65,"unpackedSize":359658,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKkmRjvbReqqKeCieQ1+k2ypvFmPgg2UvReBYfj1wZ+AiAkB4i6/KHop9xOd2slLeRYDSyS2WOClfBt4i2GXD5PUg=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.3.14_1519202371352_0.5132236865490674"},"_hasShrinkwrap":false},"3.4.0-alpha.9":{"name":"@storybook/addon-info","version":"3.4.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-alpha.9","@storybook/components":"^3.4.0-alpha.9","babel-runtime":"^6.26.0","glamorous":"^4.11.6","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"^3.4.0-alpha.9","@storybook/react":"^3.4.0-alpha.9","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-alpha.9","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-rWuGpgNvyFIAwAvoF5UcLv5ap50w3buYlJWTDfq8uad08QDYocrOblUMNHrcLoQjShwgjL5CCtiafng5klo6gw==","shasum":"c0519a238292a28701be03381f90353cdbaca820","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-alpha.9.tgz","fileCount":70,"unpackedSize":408507,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfExGYTXeRFFjkiJP7pBciBPUoz1SfVGk4PGuTVkk2CAiBZ/Kcodra7pE1pWYARTtsgVGToz2qIPzuNaU+COvq9rg=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-alpha.9_1519289183706_0.26807702938600264"},"_hasShrinkwrap":false},"3.3.15":{"name":"@storybook/addon-info","version":"3.3.15","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.3.15","@storybook/components":"^3.3.15","babel-runtime":"^6.26.0","global":"^4.3.2","marksy":"^6.0.2","nested-object-assign":"^1.0.1","prop-types":"^15.6.0","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.3.15","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-NnkkhOcEUZehHBCYuIigReGlG79/BsCO+0LJS4C5Z8qYG4c7CcA2leuNqe0P2TjeoqiU3g7jKaRbE6OarUESkg==","shasum":"32b914e009bb778f79e7d0e6f0433c477b2edac2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.3.15.tgz","fileCount":65,"unpackedSize":359658,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZWNksJcQ+JsrQ6ATXJk6oORUoc5ONTpUH3p0DiGJk+gIgEO0gvFVw06UbAatJK0rZjQwKcWvcv4ElzZ0G+rJO47c="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.3.15_1520416665688_0.8082210368893643"},"_hasShrinkwrap":false},"3.4.0-rc.0":{"name":"@storybook/addon-info","version":"3.4.0-rc.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-rc.0","@storybook/components":"^3.4.0-rc.0","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"^3.4.0-rc.0","@storybook/react":"^3.4.0-rc.0","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-rc.0","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-glEPB4VNikr4VzlP4IsUqt3smfpIGaEqJpnkEu9RSAAAwDWV7dAc88Rh7tnpPYI6w20AozXMk8bS7w1cTUWvRw==","shasum":"9d88bff38ffdbb7eec8d488663fe2385d44d3c1d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-rc.0.tgz","fileCount":70,"unpackedSize":408518,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqoZLw0+4LzS7j5vTKtCG+H2B9Fdt8DrE7ML5uA0ui/AiEAks8PrRpTHnaOc/ZOlFwNCy6eOI1Ijmr0M3eYMgxuAGk="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-rc.0_1520478279464_0.26318041581421103"},"_hasShrinkwrap":false},"3.4.0-rc.1":{"name":"@storybook/addon-info","version":"3.4.0-rc.1","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"^3.4.0-rc.1","@storybook/components":"^3.4.0-rc.1","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"^3.4.0-rc.1","@storybook/react":"^3.4.0-rc.1","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-rc.1","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-hUewM0ohbgxWmSnUNK9ZX3WesYLPnrMRSR8xj1KmyoCo3zbrB7aCuNgfZLoRdNYk83j3Om0CShl62N8l7ju7RQ==","shasum":"7b1551c5747492803c98e0faa9a528b7888a0f4a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-rc.1.tgz","fileCount":70,"unpackedSize":408518,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBE2Ctg0moloJbsXTg94ucjgWdqer0A32fmRO3oca/XuAiEAt2z3ImkG+SOSjtIpCfiF6BlxYO/1BW4/PVowqYEhpDI="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-rc.1_1520937343915_0.43303792859041224"},"_hasShrinkwrap":false},"3.4.0-rc.2":{"name":"@storybook/addon-info","version":"3.4.0-rc.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.0-rc.2","@storybook/components":"3.4.0-rc.2","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.0","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.0-rc.2","@storybook/react":"3.4.0-rc.2","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-rc.2","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-5bQwlkqkiCvZ3tKkBepmfOyOy1UyaF7ohc5wWaD2GbKj9na5GbVNW4bbCIHLvB2TxDZLVCH6oL39LqSz98LGoQ==","shasum":"2f25a7a4b408b99ef99ce6bd5fe28b975ee9492b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-rc.2.tgz","fileCount":70,"unpackedSize":408514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByq7igCSHPwRO2nfF03+XIdye9DrYmv49P9k/sD1nTzAiBPg+9vEE63IKYrSLlwrD1OUPQYx+TSZ9zi2R9O2L0btQ=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-rc.2_1520938910864_0.050469702325738997"},"_hasShrinkwrap":false},"3.4.0-rc.3":{"name":"@storybook/addon-info","version":"3.4.0-rc.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.0-rc.3","@storybook/components":"3.4.0-rc.3","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.0-rc.3","@storybook/react":"3.4.0-rc.3","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-rc.3","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-vP9EGmLtqkcLuIWjZrQQO2PKWXCzlF/rR9DWNp+ai/KFracN1VcTvXz901hTDukxtrFfSNGsaNQPuQ/AoveGew==","shasum":"c14ba5be2c6b2a31b4b621167be86e100cb24965","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-rc.3.tgz","fileCount":70,"unpackedSize":408514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ8WgROOKpV0mB52GDzQjstqP7p6GsPYg+Ry7DB6pB4wIhALWNeSd513BY95br0UpojcB/bB/R/3wXRFdKH1zzDB81"}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-rc.3_1521500664186_0.17652858472834443"},"_hasShrinkwrap":false},"3.4.0-rc.4":{"name":"@storybook/addon-info","version":"3.4.0-rc.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.0-rc.4","@storybook/components":"3.4.0-rc.4","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.0-rc.4","@storybook/react":"3.4.0-rc.4","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0-rc.4","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ulO+OLz6qTAKGqiz/ZwgTFTxxmbaRb9XZD6u9PHe9uvJ0/y+HD6s3IUW5YzIFBwYigvaHyqj590pC/1YAO71BQ==","shasum":"b97bf2502046bf063af29ded5240462907efbf34","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0-rc.4.tgz","fileCount":66,"unpackedSize":407348,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsesQXwbOlqRVQXkRfhLuWYZ9q++6wYYE/I+TT4MzQOAiEAzBKeFUUiUCchfuIJTtV6P56zT/wjTb3TqjY3tWsusgs="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0-rc.4_1522297563264_0.5281177183707293"},"_hasShrinkwrap":false},"4.0.0-alpha.0":{"name":"@storybook/addon-info","version":"4.0.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.0","@storybook/components":"4.0.0-alpha.0","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"4.0.0-alpha.0","@storybook/react":"4.0.0-alpha.0","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.0","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-sySckMgO4ToEodX6P28BWkYB3xWtsZpz+DQsJ3xU8UA8Jlgwqg84TIUBKSvlsP56wWsw4MHuEYzWhSex2mbFpg==","shasum":"1a259a86964711833e9afe69d6e4b08fa5038959","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.0.tgz","fileCount":66,"unpackedSize":406471,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDM/p/2+VjXRiyKgqy+tIViHd8oyKbgmgUjslcuOmjsiAiEApJRlhNLrao0wfLsbiPH26e1u4L80jM4MnDr1aeOcNko="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.0_1522301653972_0.04491574549384647"},"_hasShrinkwrap":false},"4.0.0-alpha.1":{"name":"@storybook/addon-info","version":"4.0.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.1","@storybook/components":"4.0.0-alpha.1","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"4.0.0-alpha.1","@storybook/react":"4.0.0-alpha.1","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.1","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-CGo1slnrcHp9yAACRrlMD/HvG+XfixgFYqc9Hlr9l1Gee0k0Sb8Zi9Lnu5meAwndKNaKASlpjA7tt8FQbt1trw==","shasum":"d408820b0243e517a57f0474a844e7c3a3cf2c2a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.1.tgz","fileCount":66,"unpackedSize":406471,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5XuXaPwdOYPOW4ys0fxfEsqWpi9KaLJ3cd6S1nAny2AiEAsTRGRgoiUs+++K2SfvRhHlfOar2px+AWkmAnl1lDD4o="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.1_1522337330793_0.8744813722486737"},"_hasShrinkwrap":false},"3.4.0":{"name":"@storybook/addon-info","version":"3.4.0","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.0","@storybook/components":"3.4.0","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.0","@storybook/react":"3.4.0","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.0","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-+HKxpaG3OUKNj0BQGinyvlRfxh+Gwbv/3S3HWsTrmVN6zfNa8rXj8654t97LX3mCC9KX9FHHmgtIR7eCs/deHA==","shasum":"26cb866c596208721642c7635fc87909f89c809c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.0.tgz","fileCount":66,"unpackedSize":407323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkHo+C6Gm8Xobs4wLnxsDFmLlwnSIU16pSlf8d5EU4dAIgcHg0mskbsfECEDldyiarw/oqMvcRLvvxSti8t7ywjDo="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.0_1522453470963_0.16328436096866494"},"_hasShrinkwrap":false},"3.4.1":{"name":"@storybook/addon-info","version":"3.4.1","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.1","@storybook/components":"3.4.1","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.1","@storybook/react":"3.4.1","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.1","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-t7EVYii8g+WNGq9QsG07Ghy/zlegCwHRHj5vMMbf3DxQyapKsewLGh8/uhPlsZ9/JWe1Mw+yzledgLnliGtvRw==","shasum":"9836b136b9886d3a47405065c0d57a01764daf89","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.1.tgz","fileCount":66,"unpackedSize":407323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH0IjD8nC6sbjTK/tgtCgJWhjgDtW2mYq5C4IgJ3wCg4CIEKKPfSPbFvE1ff1vH97jaN2DcIb0wXkOdjVS8uto76h"}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.1_1523399642148_0.9607433438184065"},"_hasShrinkwrap":false},"4.0.0-alpha.2":{"name":"@storybook/addon-info","version":"4.0.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.2","@storybook/components":"4.0.0-alpha.2","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.0","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"4.0.0-alpha.2","@storybook/react":"4.0.0-alpha.2","react-test-renderer":"^16.3.1"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.2","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-WBMuEW0UviZa2KpG3wXAQrrtVN++ZsaE2uQPyGgaokmog2cC+gx+oS14ioUKA6n2LsKHtQhjHv06c2tcv2FIbw==","shasum":"c52cdff00e3d87f0f828b9059c889d6a68c4fb26","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.2.tgz","fileCount":66,"unpackedSize":406623,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYt3YF1Il89azeWN970zqJ3JKB7U7U9uAdaX/ZCGIIowIgNB44nwjIToCB3+gV+2pjdU6SohG1Rnhcxay+5CTAQc4="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.2_1523407250946_0.6216954092733296"},"_hasShrinkwrap":false},"3.4.2":{"name":"@storybook/addon-info","version":"3.4.2","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.2","@storybook/components":"3.4.2","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.2","@storybook/react":"3.4.2","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.2","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-rJEq55nz7i7P6nlfS8iCuCbVYwYTcuOb2wYHLBtURgDdtyA5rg3NXBk8rKj+yv8LDXYAmJcaKiTong3LkauEww==","shasum":"0a101b86de80e76fe3b756e2dcdd296c94cc1914","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.2.tgz","fileCount":66,"unpackedSize":407323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1n/ECRA9TVsSAnZWagAAgNMQAISnDjUHihZfWHYCbUAJ\nECMvBDgnTglyGzjZVaBTpyWQaXPpYjgOO/If8wvmZqslmISjjF0UGZhzme4a\n4dHt/SsVSugrBAYwrBS4VZ4O1xRqgp1HxcuAnjwtGubcAePyFKcn8u6GdKhm\nohvObgq+/R1p8XpOjitXxoWO3xSko0K40KymOLHYCMn5pxUqAqqwv2DuAePZ\nZ/Wd8uwPyTki6qrRaRLYH5+EINippYtcmGvFfV9jV6dpqvLYTx/DpIJmR25z\nYCYq7OxaXbgsmoufOZiOX/YZ2hhj+v7y61TMiOXMFffFdiZ22lwBGuGoxgLi\n3CxtULv7gzKX048UApJxw2TXsX9VfpuTOxp79O/gDewsKWyOWpWsoPZTVqmO\nyY1LRLJwfGeZphPYaZoPb+u41CrI1Rd848fSGRhC6SdcbOp2+8eizN0ciEaq\nOk7yP4nWJWtJcuBOrbBPjvFIC12Q/Z+PB4+bNU+0RBT8GsbuLaRW0saVbTT2\nFa3qPlaEVvCOggz4nEkImVgSLflzOaj7kfvrflQAQ2lGQxZF0cei6c+Xb9nl\ntSKQPWMJAviawJCAgq2Bfm70JgXbyYHQViAiernzkovXRBPh+iuJKG6UoN2j\nH9Tev8235+NCVbQ4gh7fHJN+2CVyUDCslB/EMEvq/8nL71xReUwxwfqSZM12\nR8fb\r\n=N/xT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBK7Am5Kyz345oElT5ZTqs4+sqVDlIEG9sSTfYp2WlYCAiB1D2D+39cPti1bSDxr3+E2M+yz0Z2EhNVSsewFBWvvPQ=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.2_1524006850353_0.8713313668613245"},"_hasShrinkwrap":false},"4.0.0-alpha.3":{"name":"@storybook/addon-info","version":"4.0.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.3","@storybook/components":"4.0.0-alpha.3","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.3","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.2","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"4.0.0-alpha.3","@storybook/react":"4.0.0-alpha.3","react-test-renderer":"^16.3.2"},"peerDependencies":{"react":"*","react-dom":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.3","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-KFMdeYb+ZarQzwqW1CT3L0DG2EHCFGZYjOK804xQp6W1nrPOTfZP0JAHQA4/3OKSH+RjcSb4zMunA3IGE349qQ==","shasum":"9816a3971bac3ba9115641486553872114d9645b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.3.tgz","fileCount":66,"unpackedSize":422236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1oiGCRA9TVsSAnZWagAADVcP+gKa7vd1n9Co0U9kOYfl\nbFlHx0JeRmwY4vYMtQhRrfMXU5a+k0H/eche5h4f+JJWBTjm14V5qgBW5hds\nvXU11Vsbraa/KLGH9hAQMwYdvRm1K8YouywGQObW4R8tsM5TzC8IywKy6lfE\nBzmH4gUQFgyAn3O3wpJXeDAOeLFnIh4ZuE2kCVMHHKOcmgrscNCLmczB9crz\n9AQn8v0kJXt5UusTxVwGw6ket4us4Mb+A6lvMGDJl7S5D6G2xPNp1/WdT8K0\n7QNIVrWYp6lhdCetAJqSueT4VFrzGN+iNeJlIljm73H2/x+Kul7Vl3a/D15O\ntB4d4hdmOGwlKi6vidI96a1HBm0ni98o919PVn0Q7+ycgDHVfGEvlF7XIod8\nJbnNJ+LPFgDKZsOE2LAAro/ZMo1z1+NuhAljL5K1cmpx/zF7tdNFv7PNujOc\n9VYtssGF0ErL4QeR+CgDfovXVj673yQ43/4E63h1fy/ilhWhW37RrUtOqKUZ\nbVb8rfroQ7XzOLx+ydtdu2yUOza2NVzdufxIuQ0HNc34TpE+yva3c9tgZHRC\nPMZa9N7PzzUFPoRSVZwZPZCSHyVHzcPj8hYTILlYXK0tmxV7P4WDzZ46E281\nFo7WJhHG7V271YbifsFd+1Yq5v7Cu817pn7tT4TMBRbriaIddti98YAOXga8\nk6Cz\r\n=HoNr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqGscnK30RTzMhfK4JqE4bjyIxi85F2T8RpG9CCmtXCAiEAvm4lGdn1rTVPSZwly9ZzKvI7iBKeYHy2N0elZEe0igs="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.3_1524009093971_0.26652438400604184"},"_hasShrinkwrap":false},"3.4.3":{"name":"@storybook/addon-info","version":"3.4.3","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.3","@storybook/components":"3.4.3","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.3","@storybook/react":"3.4.3","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.3","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-En4Bc3V9yeG/Va0KvWXLtlREH26xrosrCq9LMNe5EgXwngLTKsgXZ897zOo8nXaNJvBua8UaiFnYDXiFRXSvZg==","shasum":"c47d4ffef43e3662d3b0d54f400716ff9907dcfd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.3.tgz","fileCount":66,"unpackedSize":407323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa43VkCRA9TVsSAnZWagAA654QAJ6OzpO1l2f8D3EmSez9\nuDBRs6DRhGLmFnxLUVzIKrWuBOnGqHKmq0wMVcPVN+4NRsLFv7oUxple7ekh\noJMAqCjyjh9nNQN6yDY1zinD06anLOZ7tAWmQzfydI8WMdV+LZFoSLS8hzSM\ntxF1SiYh1PzCUWl844Y5Wklt9XQq8AxDbph6OinvIf2737JmeL+iFEM0Ia7i\ngUpuwkEVU7aa1dH2rGqGKM/yLNWraCTT5trzj2K6bUQO8XT65mRfLI6tiZ4U\no6xKOiVggV+wtQEWM7ga1juyWa2EgokTTkScGHx3B+XpDkysoV43CezFchWC\njikOcCRCdTLTsjIkG0MznTM2xQW2+fpU7HHcSjNSHFeNeLv5cXedjw+t99Wh\nkLiVidAZ1jJp1S7+Air73qurrJ7DkQHRqtEEwIqEkyLInvOwQZHKuleenP3h\nmHE5lgaJHPxnaafOZExTF+MuBAHHmergnnVWRWc3kadG8zN4EaD4ott/LW7/\nTDmmJjr8s09Mc/vuPBkdedgOjQV0hjQSn86jbg/05zBLGDF/hWUDplnZGUaD\nMAouC6omFKHw1sToguuT3RdBmy3XFN6zPxf4CRn4MWZ8DqxN7L9GcIP//PiL\naO7iTA/hLyzf3aHAzKGMsD37AN+euchY5Kv0VHiI1Ggtz7ofsarpT5Py6YPA\naBDf\r\n=PdB6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcOIVh5nBGfmO3eQlgxmPvNXM1ReI/fNytgWJtXPBlhAiBp6a7SjzuwSRlTATEVmPGvpSWMjSVCMnzfohTNbd4cUg=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.3_1524856163383_0.37512507253315963"},"_hasShrinkwrap":false},"4.0.0-alpha.4":{"name":"@storybook/addon-info","version":"4.0.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.4","@storybook/components":"4.0.0-alpha.4","babel-runtime":"^6.26.0","core-js":"2.5.5","glamor":"^2.20.40","glamorous":"^4.12.4","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.2","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.3.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n  excludedPropTypes: [], // Will exclude any respective properties whose name is included in array\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.4","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ZXVrykikYGZBJX/AngeZ9EmPkKM6qjImHBmSTNwd+uKgohRXNPtF+s1enY0cRJjCbb9sapGz/BPdpLoJ++8q3A==","shasum":"2425722f197006f4b3cce960f6c425da0d684bc9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.4.tgz","fileCount":60,"unpackedSize":421604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa433XCRA9TVsSAnZWagAASsQP/RcV2wI0VF9/dgIoVrt7\ng7EfOJAzpRJlfNa0shN4Jk/+lHUvxicygo8H/ZGCeoraHxjDnVM4Rb5fxlzx\nOTmFB82IqAfsiMlu2LRwDO9tYlaC2/C4O+M38m2tfJBepw7zShoQD1GAXTvj\nPWp8UVOzWBeokdABI33Nj8eBoyDhoLAn6P7+1pJQZdKs+sQJ419rgPkeDmy5\nernxg7IsgGo8UWceSl0iuFjUHYhN0O9wxC+0JupomjOQRimtanKhntw2cUrK\n3xmS2Fqddm8D9foOVqDirEZWcj3AV2+EWemoY7ZdGRP1zg/J35TIdw0CU/rW\nj4N9bolvqX+T9cbxyry2oIuODarf8Yhw7DCw6K951GDkWMhoAQuhc743li0c\nypu8Bt6IXLhfxy69pNb/wQk8nF3wqBctSEUl3+rsEmmhcRh+EWw4EniMf9pa\nhsZhZBWUSBsJbO/92BS1FP/8q+fRYoDMlGRQ/lU58eWlm4oLdxsyv6S/Zi/R\nnJ6BphomIvEKct/rdhtI8WHh2Xi7roEA5piaPgbP1Ys14WiAi9yHnJAZ8VXf\n402FjHWttroH7wTEENAP1yro6tVqcr9Uuj9vhaZg3LeT/p8FcWbcgoqVg/Rk\nC2Z1LOCMNr8rRL6XIARdeB7a9H5RvMtEKKfy5vcscXg4GCvbt0Q+SJIQUs4S\nRvEH\r\n=WjPE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC29vNi7hE4sx38/KEl+FWUVE5NzYUYH/pgVL2inRUtigIhANBwTEzFbDrtKo8BCH8UR8gWUZMzPyQleKOj7gD30LHj"}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.4_1524858326905_0.638182570500214"},"_hasShrinkwrap":false},"3.4.4":{"name":"@storybook/addon-info","version":"3.4.4","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.4","@storybook/components":"3.4.4","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.4","@storybook/react":"3.4.4","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.4","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-+L1gN3fiy6Qcdr7hiOotx63P2RRr9NxcMTKmt1AgTfg+BY4Ku8C3MiAtJcLsoSZDViim+/nM6jcuTGRvQQqwBg==","shasum":"cb3bea21ae2f17b4897bd0618bd053a4b05af55a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.4.tgz","fileCount":66,"unpackedSize":407323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa90UCCRA9TVsSAnZWagAAqmUQAIc0aCYoBvOk5Oi3UqMT\nGS90Y6cer6FZstV8LFuJ5KLgcStvmEL6OClVWmlqiJ6xGU6qQ33xCBhJYvpj\nSfJFafKzTN5OK8pgyiXmYTG/5slL5eonp3EwstaLu4i1gyM0nGWeanRg5c4n\nvcdgNe9qBKAhB8c1jbObS2IIxA8bK8H+z0QrZbAaCaQOSC/wb2zFb6RkoIcQ\n0IUA3gzkMh0nOOjAtizvvL1T45h3FH1RPz6QQSLdJwcS9rFa2QBgOMkpnvW1\nDjPO5RHuCsXUhiQtb+InfWBnQPofHC729+U/qx4IfdkB5v7WNvfGV5evErWj\n4LigNlsS1bI/+60a1GCAWtNpfFN9jgZ9RpP/SN1eTT7v5o6w0YO8+925lopU\nHEHYZV785Xj/3eLdNaf32qTVSMaJGlIKN8zFbjeKRZFaPkyRUg3lC88cK0aT\nI9sYVw4oPwby5HSmqb/H1qcoNkgoO3iFH8qdBhMfdhPJSHnZKWuXfbshrlUS\nbpNxQyeX78YadKFqqt3MlAmkfnVsgU/wOH8r0bIkBdSBS5UMMvHTBZElCXBk\nMt3XXE65feXhzvh5BDg7wwttVwTFAvFM7f/9C1qEi7EvtJCSf5fd3OMM4aqc\n8fdNgbXRwqYrXay7SJL4zQzT1ZsgTyr58ZYn9zBGOM4DyFZE+zg5cXmDG5QJ\n4VDP\r\n=knTP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD124exyDcU/hB96umA1X5eG4ijBqJz0n0POQMhhR0MUwIgOjiQxwDYqKTSwkEfeCNDiVV8oREImvEZmAHwDXJ0iwg="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.4_1526154496880_0.6908662436356063"},"_hasShrinkwrap":false},"4.0.0-alpha.6":{"name":"@storybook/addon-info","version":"4.0.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.6","@storybook/components":"4.0.0-alpha.6","babel-runtime":"^6.26.0","core-js":"2.5.6","glamor":"^2.20.40","glamorous":"^4.12.5","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.2","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.3.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n  excludedPropTypes: [], // Will exclude any respective properties whose name is included in array\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.6","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Bo75HnE44OhR5IxknKKLdeh1s00/L40HV4rtAQsiZwxe6md0P28JmZCn1ja+tvCLBnCEDYbPomWHYX1TNszrfQ==","shasum":"566b407bd13d7409751b86586d8539da5bfb561c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.6.tgz","fileCount":60,"unpackedSize":531764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa90+bCRA9TVsSAnZWagAAMzAP/3qkfYVMPtCLU+vSAALt\n8rWbZ7W41yERtp2HJkx0/s/L5bogy8WAhNWZkobj70DEJb/0owaD4UZsNmuL\nfEPA5DS802eciVqJj8cxyNsaRBVA3VwZONNuq08xjB/R0PC/bnN4dnP1BukQ\nsIyvM2WVJP09haHqh8bw3wvxplBBB99iW6ktwwaM+Sne4KwIoVec1hDFwpOw\nM2KlZH0Px7dg0D0/D4Zz6nQEocKXL+Q0YNmgCwfdsZ+wWctiRkj/BjvzIszg\nzHxJP5BZ43GsXTTPftNGjJDBrUV98M8eOB3efRnX7F1+1toefghZzs/7fxdr\nNXkgRvYci1VGBk87tj/f48UNxN/Hs73yxuML7gSNOpFT9sLffzvwF9YfPLCV\nymGXSldnyH81N4tH8LdOK29Y5a/E/PbbhQFnnCIdTBZsxSu1fYFPJQyUws97\nnpCBa2Lwf9BcVvaqtdtjv+PIFtPfc7UazuHWXnrNknB2yTHBAXyKZJKex02P\nwBimMtGpWC4gU2XLNmQBZjJzp+C/TKl5/demoQTc24IoQ+xg0I/bsF3bzD/4\nNx/7Ub+NN53q2rCiCGLneaOvuZCQFq7ZLxl2SE2SpJjcxAGcZx0Mw9528ofP\nU7irzwFks3FyIDCEiAVh5ueFNhR3xWYuVpgJ4qk7iBZ398RY1SSq7BFyTKtB\njyDh\r\n=ygF6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWbS44wVgIn690xj/IQST1qfbLr4n6aVR/647dfwpxHwIhAJ5ZI/AjGOelphna5jsGnO9CBj3l6Q2rosSfHDn8Lgx8"}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.6_1526157210925_0.13977599998718593"},"_hasShrinkwrap":false},"3.4.5":{"name":"@storybook/addon-info","version":"3.4.5","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.5","@storybook/components":"3.4.5","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.5","@storybook/react":"3.4.5","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.5","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-gmrCStfLsfokcHyzU9L/B78N7m4aU66UKgeCTmaKfIdz/jw5+wASIP8QXIPcPo1E45za5YWPishZpeZP4upWhQ==","shasum":"cbe292ffaa8a9c82252697333d4ac9dde411e918","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.5.tgz","fileCount":66,"unpackedSize":420668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/f5gCRA9TVsSAnZWagAAMksQAJ/uEbItKEkV4EkfV/w9\nFDXvc0m+gJgCv26gGLrPJC+5cF67BgcZLv22HKiI3HuJnFn+kjX8SqabsSxO\nwajhGy+OoP9FDBlCid3PTeqnQ9hHfFXGX2b7jzkhNWcZPikNv55BOJj4mimn\n6zDMJmA4OZbLj2yrNpXe/JHhN2tetNndqX53bz0TEWJId+ypP+5MrTC2+PuU\nWDUkB3eiRss/EXs5CO9v/+Npj/g3G41kUuqFThIOXP/UREEMIZICFcLpG+TH\n4hpjXlBwt6oKqHG2wPkCqfdaxvWItEHjbD/Pzfl2dlZ2VOCNo4//hlC9L8yO\nEQCkRfrO3Tdmccp0zGmoxKbaAK/A5nFklMj3XzRKtrlbVw0m+0IHC2Br1IvF\n8fzYrcuqbJ14+CBXtbmWppaFj4dHiCZk+CUKHnRbH9SQQxdCG3plqdLKZZlR\nuUtXqVXD5T6e54qwApLcN6csZO0L4roaCBkJQXAE3BRh+oIwxUqrYEBNKw2E\nRjW6jnxeCH4IkBArxbJHwZgtAy4yzUrMGAAGNWyp3EiC5NnfVxngMAJgEJTY\ngiR3jzSBSzoGq6oakYlvrrI6SfmWevEreN/1LyzNSZPxp8SiEG+lQOlaEIv4\nnIGZ/H29tkZi6jaLec1PsV6/h3RUMvXs3ZHLF75ysKiUj5Ygjpxx0yR+0bHS\nzVw4\r\n=75Uh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYIhse59I9Dg5SbCRH6lYDAMQJkquF1zxC8LD0LTNrMAiA1gJImYbX1SbalpI6QKacZtZPcamh6x6b/uUfYIAn6GQ=="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.5_1526595167131_0.36706014936574016"},"_hasShrinkwrap":false},"4.0.0-alpha.7":{"name":"@storybook/addon-info","version":"4.0.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.7","@storybook/components":"4.0.0-alpha.7","babel-runtime":"^6.26.0","core-js":"2.5.6","glamor":"^2.20.40","glamorous":"^4.12.5","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.2","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.3.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n    \n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n    \n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n  excludedPropTypes: [], // Will exclude any respective properties whose name is included in array\n}\n```\n\n## Deprecated usage\n\nThere is also a deprecated API that is slated for removal in Storybook 4.0.\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport infoAddon from '@storybook/addon-info';\n\nsetAddon(infoAddon);\n\nconfigure(function () {\n  //...\n}, module);\n```\n\nThen create your stories with the `.addWithInfo` API.\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Component from './Component';\n\nstoriesOf('Component')\n  .addWithInfo(\n    'simple usage',\n    `This is the basic usage with the button with providing a label to show the text.`,\n    () => (\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    ),\n  );\n```\n\n> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.\n\nTo customize your defaults:\n\n```js\n// config.js\nimport infoAddon, { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\nsetAddon(infoAddon);\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.7","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-4zZMcwjzbSi1E1qeHxG/BNbfAxETmplZo+toWxMTk1siU1wDQ1QHI5yoh1bQEPRcwGCKWAALZjaKM9PVC6RKMQ==","shasum":"79ab28fce07119773202d9a06a53177792b7e37c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.7.tgz","fileCount":60,"unpackedSize":527369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/gpaCRA9TVsSAnZWagAAIKoP/3daB6Liq/sOJNGXNjby\nPzc5Xj1DoyTjWiGg/nI28++DtvNXWN3x/+i3mfHi87Ukk/HghMnKpX6CQOE+\nR4F9tuTlaaQGvukEFZBhsXnzOH1upDL9M/QbPYem0U+DKTrwAJZxwoAmTMEW\nwbVv3DRuQtL24HIuNKNjgrgQJftsBNClQv0Wmac6O5s/B4aze74hKLm9+Rta\nkOX4ygrIzDZ+hFfZqBmQTXX0jO+jG+A9Sabea488K09G0snuYROaUPlzHx2K\nGyW+9qj+v/cw60w5lqn8bcqkbFrXqqdoDU/+aMZNoG3N9MlNPo8/ywSxbdr2\nk+99lScHdSghnPDj/gncSdhCH1WJg3865bwrVLo2Nh86ooSGvqpqF5pg77Zv\nNwrS2Smjs/lQGSmrlu6GUA55vmnRnooy7Bd8KVq+oPQ72PSSa/IvIvsYANWb\nvBmS8Yma7loQh0B7dL28NkKkGBugqUjc4L+Zo2h2t1i+4qxmwom6roUd35cn\nBfPBMrdhwI5GQ5w0UIZgANA9wqm4phFNY5ecxTvg3iuGJlbqPwFu47Wiw9kB\nigjxboGGl1WyCbe3ig4QlF0hsJ7bUj15KSTzJIKprGtkJ/DE5yxrq+Pm4V0a\n234FYpL7fDID/F2mUzGLEhog/cqBqe3OXuNwAXYX/cPf+Ei2cY0hPpYhFnA/\n52zF\r\n=/Edm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRup7SWdyykSijNWvDErFcZZvNO+E00RwHWGanL8yRNAiEA2njA9RU4/J8/xSV0UUXh2KJ+TPUogHOGtMfDAFE0hOY="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.7_1526598233989_0.37268595422443895"},"_hasShrinkwrap":false},"3.4.6":{"name":"@storybook/addon-info","version":"3.4.6","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.6","@storybook/components":"3.4.6","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.6","@storybook/react":"3.4.6","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.6","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-MkVUKoY4AJjDIjvv0Y1Y8gHc5fve71ZGgxnDF/amztMXuXUya7kBjfHl3rLMLbZBY06ifdYv9OCJHU8VO465LA==","shasum":"212c47d7d9e80b4dfda3c2251d035f929e29a538","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.6.tgz","fileCount":66,"unpackedSize":420668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCf5ACRA9TVsSAnZWagAAKN4P/2YAiKmBrxNzj8SwpSwP\nJWoYtbGVeDcQOFZPIZef+RP3OiET6bUBGc44/l4Kek3HoFUisp1XBPSxrlqx\nzF6tGIN2HUTTI48/CJyGAMLyL+dl9fgxy5H00Lk91XmFv5bmtX3g0CR7YnCp\nT8xavJ15/+KSm77aVEQ0h1AX4wqPw2hgTuYh1K2heH+PNBM9cFKloqwNF+qF\nPUi9qanUd41bTZKZs1h9e6cT7pFG+B7H3kni/wMSOv2VuxdDWaRHYoX4FUQ3\nn0Mn67lWLzzIFPV4AfJBrQeU0bA5eBZ5sK/gW2PvF9+QU+3X+41g34qnrQR1\nLVBpa3zk6shuez3y8umay5nvCDhCi9Ht2FgYlatbJ0x7hKaKAWS+S2mve7uz\nWsa8adahg1LDkJ/u2/ZZyXrEoICxAAG+8iIArui3N3hqZnGmlSjffXr0s7qg\ns5Y+nAzal8ZR9cMlgdOdFNQjBSQ52ARg/TlJfMH06NMFStDIH+56JTGyUJTc\nCXOMWQUG1skPEC/PsblvC0PlALD9fC03mKpcTuTzvRmWURvYhJb1A2rE243l\nSLr+u35DDUt/xZiP1kiQafatRoYyrBWM5CodTHbKXll8j4w47HbudO32GSOr\nSuo9axURlfw5RmY2dMMV+sLSlDDYbkqTWSnevJWs2Vxy9rqCHBOL5T8gw2bo\nMK2Y\r\n=b843\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqDQlScoaDgH2aQ/SXL01Caootnzyd16flocE0OOETtAiEAp/bRTWvBnNhPMC5hRti7LWgIf6TMT6WD9ircePwj5A8="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.6_1527381567083_0.7992444086006121"},"_hasShrinkwrap":false},"4.0.0-alpha.8":{"name":"@storybook/addon-info","version":"4.0.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/client-logger":"4.0.0-alpha.8","@storybook/components":"4.0.0-alpha.8","babel-runtime":"^6.26.0","core-js":"2.5.6","emotion":"^9.1.3","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4"},"devDependencies":{"react-test-renderer":"^16.3.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen wrap your story with the `withInfo`, which is a function that takes either\ndocumentation text or an options object:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo(`\n      description or documentation about my component, supports markdown\n\n      ~~~js\n      <Button>Click Here</Button>\n      ~~~\n\n    `)(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage with options\n\n`withInfo` can also take an [options object](#global-options) in case you want to configure how\nthe info panel looks on a per-story basis:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('simple info',\n    withInfo({\n      styles: {\n        header: {\n          h1: {\n            color: 'red'\n          }\n        }\n      },\n      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to \"summary\" in 3.3 release. Follow this PR #1501 for details\n      // other possible options see in Global options section below\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\nThe `styles` prop can also accept a function. The default stylesheet is passed as argument:\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('Component', module)\n  .add('custom info styles using a function',\n    withInfo({\n      styles: stylesheet => ({\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'red'\n          }\n        }\n      })\n    })(() =>\n      <Component>Click the \"?\" mark at top-right to view the info.</Component>\n    )\n  )\n```\n\n## Usage as decorator\n\nIt is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator((story, context) => withInfo('common info')(story)(context));\n```\n\n## Global options\n\nTo configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  header: false, // Toggles display of header with component name and description\n});\n```\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with this components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n  excludedPropTypes: [], // Will exclude any respective properties whose name is included in array\n}\n```\n\n## Customizing defaults\n\nTo customize your defaults:\n\n```js\n// config.js\nimport { setDefaults } from '@storybook/addon-info';\n\n// addon-info\nsetDefaults({\n  inline: true,\n  maxPropsIntoLine: 1,\n  maxPropObjectKeys: 10,\n  maxPropArrayLength: 10,\n  maxPropStringLength: 100,\n});\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.8","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-jdh4/i8Ey52Za1Lv9xVfXEOXmrvGJdgkgFYvAsZsDSM4dCJRY8zL7dzq/NELe+k5czukbXqG4cQpB14sBsmRdw==","shasum":"7cf176ba6aff0aa2d29e348e49dd6100633ea72b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.8.tgz","fileCount":60,"unpackedSize":419489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCg5lCRA9TVsSAnZWagAApOgP/2ejlEgquYSbO3ciYsMy\ngkKtDVEBd64EBPGJWfZmB3pJWxIF/NpHk5MuzcG5+S2EoKCe9blTvuwCrNUg\nKFescOSmH2gD7fZM3KSNO5Y0955FaOVeeWnrGaMqIg+4x2VGdUGc7vCsgL1X\nA291EEfkpBQPV31+98Y7EMatP94WQMcmWQY87NfzWdjKJqlTQlPP2RLSi58E\niuqU3dHTQvfEkS8FGj81056t1FNzmBe+GLacjXC0VkQVGnV5CmvKXOrRS4Iw\nJdNwrENfWBqo0/ayNb61ZZ9yjwl30c76f5CxZGCBlKTt0jaNE9SIY1hogmW9\nKYCGkchkO7hsBwgOSYeAbVAu0HH36EZslsFaMZ/yW9I8sO25asKQIJp4a9GA\nfM8DD/gvI4Zc5zdsarZxnMN0DhGNY0cqOJ0U0BZ3xA2qn0dBWn3Q5sLJs+6j\nyJyEEiQsoSCedI7wGasPGnsqRrj+dM285LmmaRyNrx87RHnQnCiOVJKv3dDP\nEzmCup/ZRkw55v7GyKmwNIEps8AAc56oi1lhDlCAhTY7nhrGLuy04e20CVfz\n+sBAyLaCtX0BWWGZQQJ9ku+RslEFspDj8H6R49YJWZG6diV+05qgBch4RcuE\nhhAnPN2slgA0/OqQd4YChOcxvRAXY8odW4JQXkKpaa2qt4Z+sczAx/ttZYCb\nyIEl\r\n=GG4Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUSuBaEJx6JtLQgPCTFCCUiDE93rsLnrWRVT1W/vpG5AIgRNxrz+dyh4CK0T3D7Zby37k/LwxpDyicUO85G+fQWKg="}]},"maintainers":[{"email":"aaron@aaronmcadam.com","name":"aaronmcadam"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"mlthutrix@gmail.com","name":"mthuret"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.8_1527385700527_0.9151747155174768"},"_hasShrinkwrap":false},"3.4.7":{"name":"@storybook/addon-info","version":"3.4.7","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.7","@storybook/components":"3.4.7","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.7","@storybook/react":"3.4.7","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.7","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-dNs0D5BoYDLiT6SQ8GC7aiPB3igO5CtFX5zdpoiY/5g75t5re78d153ZMlk3I3QXt0WSOrn8042QbTlfuxgSXQ==","shasum":"c875a3167d66112ad96305beaaaebad92a9fdc9f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.7.tgz","fileCount":66,"unpackedSize":420668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHKkmCRA9TVsSAnZWagAAacYP/iQsy/qo+ngu1JYE1BE6\nfs+jKbO299iBnSlsDuT60FGzTZZZvqdpd7nm7kXe7xl1A6Kog9ku5y+VrnBJ\noXCl9kt+dWTUs7/CuAe+AhsQBfYiNBSKee8EFFbcRdWs8en3dvsx6Ih9/ar0\njg52ktOl+M6W9U8t2rYuA1BV0bOqPnD11s2MgCJ3+dS+eDe4IHxqQiMRWCvx\nkjhZUnLpFhI6aJgY/UawN/4FZlMs5VhpyvZH3/UgJ+TD9T6x7DSo5pp5S9yn\nGNQiVoIwSeZ9OD4z2RuG3s0CoEvXIC49N/J4jSBbzWp+/dty+dlv3g0t+gJ+\nWgZ44brepMlKUXTEZDOlhAUXtzN9uOnLzg/bGG+IvLMPcxfw3xKLYeXfGQCE\nGo4AZIy92CB3FOekEh7jwS//QK+YOHXMDkkpXad+Hz/UkRv2tOoOQ+6pW0TC\nRKDH7/2M0w8fE8CDUoIQKEl+P53aT59uF3cC7RmelcVLgtv1HBSn5D4v2lME\naHjkUfJb173v1g/xXVT0G7YAq1sSKjIj7ZReZRmSPzubmC/1Bb/5qslbwAu2\nhnoA2zEtV6I8sIfbd9mZ5Z5MuUTLCuQ3ZSfoDwVWv5yR2BmPbioMY/loU5FZ\njmkIfO2euWq9GS7j6EioFU9Wuu9zHqxZaLAuxC/H5xxXZKF7jsUEFUeNxi/S\nSUvW\r\n=l9T4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZLZTr5NwyXKLkmzzh07phJM3lPYlCNdXzoh2e9HSWiAiBUtTnuhwkEzmIVJefI85I2k2br4rBWhfSMoNrgEwSQsw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.7_1528604965614_0.8304910941132999"},"_hasShrinkwrap":false},"4.0.0-alpha.9":{"name":"@storybook/addon-info","version":"4.0.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.9","@storybook/client-logger":"4.0.0-alpha.9","@storybook/components":"4.0.0-alpha.9","babel-runtime":"^6.26.0","core-js":"2.5.7","emotion":"^9.1.3","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\nThen, add  `withInfo` as a decarator to your book of stories. \nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator. \n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\nor\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories. \nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({ \n    info: {\n      // Your settings\n    } \n  })\n  .add('with some emoji', () => <Component/>);\n```\n\n...or for each story individually:\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji', \n    () => <Component emoji/>, \n    { info : { inline: false, header: false } } // Make your component render inline with the additional info \n  ) \n  .add(\n    'with no emoji', \n    () => <Component/>, \n    { info: '☹️ no emojis' } // Add additional info text directly\n  ); \n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({ \n    info: {               // Make a default for all stories in this book,\n      inline: true,       // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red'  // and the headers of the sections are red.\n          }\n        }\n      },\n    } \n  })\n  .add(\n    'green version', \n    () => <Component green/>,\n    {\n      info: {\n        styles: stylesheet => ({        // Setting the style with a function\n          ...stylesheet,\n          header: {\n            ...stylesheet.header,\n            h1: {\n              ...stylesheet.header.h1,\n              color: 'green'            // Still inlined but with green headers!\n            }\n          }\n        })\n      }\n    })\n  .add(\n    'something else',\n    () => <Component different/>,\n    {\n      info: \"This story has additional text added to the info!\" // Still inlined and with red headers!\n    }\n  );\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{ \n  info: {\n    disable: true\n  }\n} \n```\n\n## Markdown\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n\n```js\nstoriesOf('Button', module)\n  .add(\n    'Button Component',\n    () => <Button />,\n    { \n      info: {\n        text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `\n      }\n    }\n  );\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo({\n  header: false, // Global configuration for the info addon across all of your stories.\n}));\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  header: false, // Toggles display of header with component name and description\n  inline: true, // Displays info inline vs click button to view\n  source: true, // Displays the source of story Component\n  propTables: [/* Components used in story */], // displays Prop Tables with these components\n  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section. Accepts an array of component classes or functions.\n  styles: {}, // Overrides styles of addon. The object should follow this shape: https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. This prop can also accept a function which has the default stylesheet passed as an argument.\n  components: {}, // Overrides components used to display markdown\n  maxPropsIntoLine: 1, // Max props to display per line in source code\n  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name\n  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array\n  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string,\n  TableComponent: props => {}, // Override the component used to render the props table\n  excludedPropTypes: [], // Will exclude any respective properties whose name is included in array\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.9","_npmVersion":"5.1.0","_nodeVersion":"8.9.0","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-eGv82K/8PSrcSBi7sevsy8xDUWXGJB/Hbqort8M+By1OTGsEh1/P2Ybp6MTMCbURHzlU7ZIFtNR8tKXw9E1uxA==","shasum":"eb7f623118aa44e527980cd240cffc25e6cad7a0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.9.tgz","fileCount":60,"unpackedSize":421943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHNbdCRA9TVsSAnZWagAAMbMP/22jrlGvAB1A/rhL4dSc\np4pDF6AJu3wfR4Vk+fkneDkb/whpSrRWo6xqHqUTb7QrPqlSglTFGyVIt/K8\n4sE1ti/aFxF3OZYHAlHvIwaHRaigcJYpg80HzqaLUYPkwZm47b9brFcNTeXj\nsK7UVUhEHPdSST5JgGKPyWjRl9yqEv6hu9w3Wq97INCgOsuYCVFNmDWzJLML\nhp2mwqDttD9uP+ojKAlkJ07WqKUx+xYBOcUkaHWTB315uOL2MplWjbIi5fO+\nJzMOVI6BPdtLu+XtaSTXuooV1I7RztG7l8+iCtfGUYLUmqKQ1qm2ZhDls5z/\ng0m51eh/JXlehr+qn6czLSEni2CMo1KONozqvX8CrfuaOm1RRVaxEEd5hhQK\n/VuKqbvEgFiwblj5zJ6iEtrNmHAHgGXa/rGRUUpQs0JtuMurF77HF4j20blg\nDWDHfC5ojdhLuqbDCaSEsSZ0K3xNiAPp7J2AKuuHD7To9E5WvwfaY+YRBCZh\nLwRp3QtRhI3jvYsXYZ05fhqsrYxLTgEBvef1++TvEbLTnhdhHhh+ssgJdcmY\nrG9kdwlxpF0Ld4WQ3Mmbi9oHSeX+ceTyFDyNrpV2Yu9F3Xxm/uP2lLzYwEip\nriAHzGb96P2njoiRXoTlbXT4GRyqbS3FAiJBmlMcHzhGve7MXCN/BVNrbnGy\n1TOY\r\n=sphr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdDQqGLuBN+TokBbXI2C+5BWJG66SdnXuzJkjljxYXUAiBkuUNp1V38Ii/b3ElsxUbbZCVu4PdF51qLbXHyNXcMGw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.9_1528616668663_0.3749094559944399"},"_hasShrinkwrap":false},"3.4.8":{"name":"@storybook/addon-info","version":"3.4.8","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.8","@storybook/components":"3.4.8","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.8","@storybook/react":"3.4.8","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.8","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-K+cGFZBwpXvWz2NNJNZOUuF9XD0G2HuKJYECd4d08TGJXK7G0GmuKePsmZt6N4FPje/DKWVBLY8XgyRJAwVdLw==","shasum":"aa97bf2548e5981a99848c7e9ab2a674c5fae95c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.8.tgz","fileCount":66,"unpackedSize":420628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK6JTCRA9TVsSAnZWagAAe8cP/1toh61VSw0holLus4sX\nBUAtpU4ZVdJ96o7jDGVMtkoz/RSsAudEO9roHze2TuOOr84V8pAEL1IVN/Xe\n/qNIIEFYrUYVxJdvtuhzGCNNVtuYfZG7uNMylrADCKg3qAFi8y7+J1UA766K\n4OERdQsg4WIu4RnnEFAWLy6xg32BrCQY3V0j5jy1Na3IbfSRQ0CK1UCgU/fb\nv/a7n1Hl/jTo7cES5DoOZkThm5Zr6OAZbbdtmMaHkONnW3ywmRaoQULLTO1r\n5awpvCq3S1Opxump/rOVdum4jaK5iIi4q+K4TEourLPoF6ua2aGPPOXAHBJL\nLlTTKOQvc0ujlYuwrAUBJM7/deW4aiJMAbCiyIIIwCO45e+WxnCZk8Kza/Rx\nnGFy69anH/kwR+bKgVRv/gtvZC6CQ5MNGM6g5OkSbDiAnZpGnIWmZsxWCtYg\nXrQtPsiwryJlgyIS0M2pwf5XjjLPUaQYzFvsvebQxgvCBJWZl2ReeFNsy2ef\nIhJ4PtQA3o15xTpWulvLKkIbQwL5DU+zD40SRDy7p6osOs/iw+/36NFSVLgu\nXpJs1uVFs9xYciohvjzxxySr4LHGvSecJhBk3f6F8xFP338Gm3LO5p2KeZwH\n2ppEZ967UJFF6EBoJ/yIRFZ0OsRewOTgbIzx1OZOQ0mM8EF3DEOMLXvv4IjX\n6G5r\r\n=Js/g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBa+3mfT9X1E/DH0L4zG4leH/pUW9TLwIEYJdS6gX2XfAiEAqZTqlIW+Y8sOokBy/63rvo+oq2rgJyb4dC8DyS3651s="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.8_1529586259323_0.7421572656104973"},"_hasShrinkwrap":false},"4.0.0-alpha.10":{"name":"@storybook/addon-info","version":"4.0.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.10","@storybook/client-logger":"4.0.0-alpha.10","@storybook/components":"4.0.0-alpha.10","babel-runtime":"^6.26.0","core-js":"2.5.7","emotion":"^9.1.3","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\nThen, add  `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\nor\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    }\n  })\n  .add('with some emoji', () => <Component/>);\n```\n\n...or for each story individually:\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji/>,\n    { info : { inline: false, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component/>,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {               // Make a default for all stories in this book,\n      inline: true,       // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red'  // and the headers of the sections are red.\n          }\n        }\n      },\n    }\n  })\n  .add(\n    'green version',\n    () => <Component green/>,\n    {\n      info: {\n        styles: stylesheet => ({        // Setting the style with a function\n          ...stylesheet,\n          header: {\n            ...stylesheet.header,\n            h1: {\n              ...stylesheet.header.h1,\n              color: 'green'            // Still inlined but with green headers!\n            }\n          }\n        })\n      }\n    })\n  .add(\n    'something else',\n    () => <Component different/>,\n    {\n      info: \"This story has additional text added to the info!\" // Still inlined and with red headers!\n    }\n  );\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n\n```js\nstoriesOf('Button', module)\n  .add(\n    'Button Component',\n    () => <Button />,\n    {\n      info: {\n        text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `\n      }\n    }\n  );\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo({\n  header: false, // Global configuration for the info addon across all of your stories.\n}));\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.10","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-lTEKX+ZoS496o0zWu3MBkzjl5+ItEV+E8bKKw3NxYzPZf4Nh96m3kC0ueH9Zy+jCYs+36YtO4rBYg9K1q60CPw==","shasum":"8a015a285f79f3bc36e74ee8bb8485c02ffc4338","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.10.tgz","fileCount":60,"unpackedSize":422512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK61lCRA9TVsSAnZWagAA2wgP/iUrzvW7Trz2BvWwUFBO\nr7msyViVK0HIajb9LmNhrklT0RP9Xm5A1UQuhzo//qbkn4mBjkG+F/7j3+v3\nACW0kfWOB4dpJEzsZS/lO9TARfFr3lv67bNI/XFzvcWD7nDPV4vrGp/w2iS0\noRGE6Z5z8XRaV+BY6b3iH1QjTus+o/p79p0vzg3TxB4Nv2Wjaba2CITFjOiR\nLwJTNxGHjfY86VhsnPlyYcS5Mwn+OC7Ub/ILws6YDJsFIjbkHUiExSU7zJ2E\nQ6mFtR7gkWNc4hH0+njYajQTO/CRfTby+tL6aTLaJ3vLEGUrRPL/7YpDVbKT\nXhM9F+ZNUTd6j7mlfSQu9byGjGWlCEGyD7QIg2gojFMvhQEuqnGjSeOoKKYO\n5gWaLDkUhSi9VqYYBtIgLr9+K+LC75EK80uTT+1nHa8UXLfSXzxub50A+V2d\n4bKXOzi46liSBD8mDRmrDJN9bOu+HKMdWlGXORiwJTmZzeroFPm7d5SdcTAq\nsg5eNeopdd3rXOG8UherV3RGKCqEqg65COnqHqDOpXRlD+b0Xbqs1OZQnhgK\nsGVDBUggXBdDdpDgNArZrjgUpMEwN6tZdbIx9Nin3DTT1hANJneUs+Wnn/vs\nNAUBtInT0N5zqYs5WBsuphxMBhsTcXZA4Jlb+82Nozu9xnd0ITvB9x7b6UYH\nbI2d\r\n=dex3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDObyv3B5d99+zZvgeMY5mKURtpk55a1MlpTOZeVGD2QIgBQVvEajD4eIfcymX9v+YIpdpgcXBxBLwX18TLPYydVI="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.10_1529589093013_0.8989298091537212"},"_hasShrinkwrap":false},"4.0.0-alpha.11":{"name":"@storybook/addon-info","version":"4.0.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.11","@storybook/client-logger":"4.0.0-alpha.11","@storybook/components":"4.0.0-alpha.11","babel-runtime":"^6.26.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.11","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-e7JMlotYYoQT87FqwlPZNdj0n451F5gwygg4QqBK5a4jmDKm72YenV403ApZTAsLJma2z0BgfdzmrFdPZiGQBg==","shasum":"19acecac01d6bf11c7eac56ddde94ffdc33c9f3c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.11.tgz","fileCount":60,"unpackedSize":422487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOmvhCRA9TVsSAnZWagAAeNQP/23HDAdk4YI32nytY8A1\n0WpNx/WPtSsBeRl0W2VYyDFsb68ZjYZKuqy3aqPd28UE85fTKBeMYQ2BVQ/1\nhro15XEjWX5yWq5RCRDT/WYEaMF2JLYPP4fpfyKvhPEtgHsX4uKloiu5kKhT\nO0jbIV1Gzn1FWfFhkvLpeusgwDJH0W8/zPbkcDI0TII27cVsVEbUihF8e/zU\nULR3D0juBoE0Nuevy9efpJyOwn6rPTl2YzVbzHDoiZNvx0JJ9Ec3WeaaK7Xs\nqEVrjRysYa5ZVyLHfHMyfxA7S73v1QBvLiaMNGdTcQNM6sSqWTZJSCYjjfrX\nTfI27wxbIliPW/WpNtJY1OZBXOuG9zxJQC+yoo/WF+3xJqaMEGTMumB+BbHX\nkHz/urkJSKjlpjA11HJhUWEkEjg1TuKPSzGabZSrmTQoH95Li4YkqdEG/FW8\nseRvbamWS4eHnSvyz/l5YY0ej+Dv1VZPu08ZmGo7C+JbL258ZGgcOcW2uJ26\nn6dR8iAf1ldeTuAF0Eu62/mYuOwXnWT1a9MYlvrR6n0zPw+qZAoFZOr7EmWB\nJ3L6InEsTFwzIymxPkYQrCpmXgIECItpEQGuU+epIJp3nVqrlVHnR/sHT5I4\n3F6VBSKck4lXfMD8HyGNFQigX5ObGACsMhLEVAVceDpJMXYepJ6MK0CxDmd2\nxd25\r\n=O+0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDv0BddaE6Y7GvlWPujoajGdXl7mcnaFgbTpjobxy35dAiEA9yNvkagCPEXXRUsB4NPiFKBnf7Ut6+55XCru+TfSNFY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.11_1530555361195_0.5212311689874374"},"_hasShrinkwrap":false},"4.0.0-alpha.12":{"name":"@storybook/addon-info","version":"4.0.0-alpha.12","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.12","@storybook/client-logger":"4.0.0-alpha.12","@storybook/components":"4.0.0-alpha.12","babel-runtime":"^6.26.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\nThen, add  `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\nor\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    }\n  })\n  .add('with some emoji', () => <Component/>);\n```\n\n...or for each story individually:\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji/>,\n    { info : { inline: false, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component/>,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {               // Make a default for all stories in this book,\n      inline: true,       // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red'  // and the headers of the sections are red.\n          }\n        }\n      },\n    }\n  })\n  .add(\n    'green version',\n    () => <Component green/>,\n    {\n      info: {\n        styles: stylesheet => ({        // Setting the style with a function\n          ...stylesheet,\n          header: {\n            ...stylesheet.header,\n            h1: {\n              ...stylesheet.header.h1,\n              color: 'green'            // Still inlined but with green headers!\n            }\n          }\n        })\n      }\n    })\n  .add(\n    'something else',\n    () => <Component different/>,\n    {\n      info: \"This story has additional text added to the info!\" // Still inlined and with red headers!\n    }\n  );\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n\n```js\nstoriesOf('Button', module)\n  .add(\n    'Button Component',\n    () => <Button />,\n    {\n      info: {\n        text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `\n      }\n    }\n  );\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo({\n  header: false, // Global configuration for the info addon across all of your stories.\n}));\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react'\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px'\n}\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium'\n}) => {\n  const style = {\n    padding: paddingStyles[size] || ''\n  }\n  return <button style={style} {...rest} />\n}\nButton.defaultProps = {\n  size: 'medium'\n}\n\nexport default Button\n```\n```js\n// stories.js\nimport React from \"react\";\n\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport Button from \"./button\";\n\nconst Red = props => <span style={{ color: \"red\" }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf(\"Button\", module).add(\n  \"with text\",\n  withInfo({\n    TableComponent\n  })(() => <Button>Hello Button</Button>)\n);\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) =>\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>;\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.12","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-49y9z/N4KX+aEnPAAyID3Ov6K9+s2IYQWZV3RKRiU3WQ8o/Imgm4ydnccYilKy8plTPBOf0lMcrzQ/mx/OvZYA==","shasum":"39d70a0896dea63ff6c635ec35f0c46e6a1c4e86","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.12.tgz","fileCount":60,"unpackedSize":422487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPAASCRA9TVsSAnZWagAA1/UP/3E75LatheDrXIeDjMbf\nm6iETXZSZtMk3K/SDhnBhpD59O5NOaRB8BaMV8655oM/UrSFcMBawBmhHo2m\nYIwXrk65jBCEbYoc1KtZd3WB84gyIQg3tznNN1j7PZee3eXOEWcQgtrh01HW\n+wlKCHaRe/vVehpZrVN6WCptw0O5Z3VPBRomIjLiO3DcLQkj++nGKN67b0bB\nfZkyt2twPEXKDBIdsb7cV70mfZ27+SDRmOhAWHLnYYTxCFB4QrJiPN+cksO0\n4Frm715xnrMuGK6SBfABvmIafYIg9YKbIzCBtb71JF3gxyOT7O95Bn8kEAXx\nPIEY4FBOQUEDuMmHlY/y2X8Gag/pBm+n6a6VnCWSvdDs260/ntSVQoSoJzLP\nJTrhrCJSa9LMUBXWzm8PPNNq5Xx2UdM8N8tHWxrJTTWcB3vzF/wiPF4rR6o0\nwSG/BTNtDEFj8SpRJwDekt7HFhu9/sDrb4wgG6xieYtgWikSdsD9jM5Ex7lE\n/qsIoYeQu0ssDQtxXc/QM8VNN01ZUUy5A8hg+Pl+rGrzKdjK9D6EE2Hh3Tj1\nYOLtjv/Xm88txJ+JMADuzzmXi9I8BlQqEOx4OdeD0aECeA7x1VcItxqsE7V9\nDmmaeX7QTQAB+KGX644upFZQO6Lm0hwtPlcQoNwWnpu99KKxzXa6v+BpFrZN\nhBJM\r\n=ckWg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBM3E9MAmoJAomXfMhfswSP7IL0hzBHtEKW/JbVA2Y8UAiEA6evZEKZB48fw1rVKI7WBeCuXFFd/zCLkrCf9uvNn1iM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.12_1530658834108_0.3686595827611183"},"_hasShrinkwrap":false},"4.0.0-alpha.13":{"name":"@storybook/addon-info","version":"4.0.0-alpha.13","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.13","@storybook/client-logger":"4.0.0-alpha.13","@storybook/components":"4.0.0-alpha.13","babel-runtime":"^6.26.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.13","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-3T2ucubf5pyACnGGAEEacjK2uOG0usX0cKRrVWLT/xlPD8OrySntwFx2yUzQv5RkBCkefzPcVbqfCVKASeSHWA==","shasum":"b62d564b58f8b873a532b493337b8be59356e480","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.13.tgz","fileCount":60,"unpackedSize":422417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRDdQCRA9TVsSAnZWagAASyoP/3aC3rqUI8Wu132newDz\nEQKdR8qkAXgd1F4NyDTU7iCjlddRZTv8aS09q7qG1aIvaG6FPW924qvwgj8x\nIhTCUN1Pg6EVR6MeXu5bS45rTY3hbvpQ7h8DRT/tt2f9UteSpXcIOfuFvHYa\n8w+VeweKVF/XrRQgHF3pV8w/Zj4wVlvSOP0pW4FtRXoS+/RUN76fFMlSVbgD\nMMdqiKik9kDKcEXTARBSSSPbzm2Apr2e1F0FLYLeqcu4J0j5N7cg8rtvCqKc\nhnnDCZGGGlkmYfGO9AMkpjiC6h3HRHlMBNL3vrEv1YFts8rVzGgHFtGfMVXp\nO58lK9B5bfQkfKyogh+QWqwZGAEqYA0zZbueRsodO/YJKgxpBI4KKmKvbP6D\nPK3mbm+Rklp8ESadBmC2ujkY/hNQSZKttUZZ05mpozPQ5udxrrAXI2Loqrht\nb7b/tW9mRcHXwHIfW05eogKse5XahcMaHMCTm9lIFIs3XkAEdEkmqftV4Zyb\n93zMBp2CaQip0xcRWE/KI2lSy0kKVxzlMC0NSok+QyGhz3u4/J1yYtEkPKp6\nOcYiH9Gtv4w4j3lr4pD6izWKwLCYoti3sEjP0qASilUKqOfbWSz7ca7E66JB\nYvkzr6XYB+tXTJESqF2KamMRqSwiJaRBaaG+9w6hvOZaYkS7PgOQv02NiaO4\naVG1\r\n=YIC+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9BF5PkUCIaemJBMoFEhB/7hTIccIk3oE1uEtLzLczkAiAZXwhbQeK2J69QAMMee1ixCadNaw5Q47g6P98DEoc/zg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.13_1531197264453_0.9682956464554828"},"_hasShrinkwrap":false},"4.0.0-alpha.14":{"name":"@storybook/addon-info","version":"4.0.0-alpha.14","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.14","@storybook/client-logger":"4.0.0-alpha.14","@storybook/components":"4.0.0-alpha.14","babel-runtime":"^6.26.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\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 Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.14","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-6Y6Ti1rTo5MIF8DEQRs5FNkxYkyV0M68Ihz2e4xBC7JGu+EAUjEvw683oXW72FRLvC216o9xu1jcQ3cLfuuy6g==","shasum":"d6a3ed2ef278d565bdc068dbbb3436d3690c8a3e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.14.tgz","fileCount":60,"unpackedSize":422417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRp3OCRA9TVsSAnZWagAAr9wP/jWhgiVPrMTpjhVAeWds\nArU2plw6TWXpxuCOUoUqfGvqUODq9c1g1OF50RS1o3RhAd+KbGnqGWDz2H+R\nso1mwjXts4RPM54jTa5l2TaUrOoocpaigpSJ8n+gXvlJi1Xkc2U9vcImUopO\ncc/UCRJVdnKDwzGaZHSvTJ2XWvSsUun11DsyBs0qswm+OMLbEnp1z+94wizD\n1pGuf9eIYv3SciHmQ2mCDnbhxOwylTXlk3epsdkfEkMV6BSo59zBk7u9Itts\nKzuzNXIQ2xXbDhqoZUOfzRrRQQPItRrzMtt1vquySi8C8EQrnk462/A2Aetp\nZMEl66Zm+RC8N64Fjn56wQtED2iPFrQelL807QSzATIQBlnNk3a0JziEx4sM\nBtqqIWacminRFIJGMe4xwYoOyEecncOYur7dnzCMyuxg3pbbEjmEslaJn+VL\nZEmKj6TVU43Oi67L2cmbSae4IIEgAb0t7+TQYDPbEa2aqsGXSZA84/ya6nAN\nC9RhNzf5F5BgTL+Q5j3zaA3eoDr0q/h8JsO83lcwDGeEtt0k9DsmaOtOGGbJ\n++F1nuaBRmKORFBKyOJ2ouUGcRSTS1/SQKvpilP5CJVlPhiO4AhbAqSGjJOE\n4s1nDdYn/CRe+LFO6gp/PLXx7u/oumL1uiq5LaIgh3Xu55+1gyyKsPGHlDKs\nYOB5\r\n=2cQ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxdS4t80ATmRDLwTrpncVWgekP8bZEpBNBv4I5N+Ng/wIgXEiHZia74pzMquPHVShZEssHb7RQ99IUkcvwnTcYvF4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.14_1531354574612_0.44883516872103657"},"_hasShrinkwrap":false},"3.4.10":{"name":"@storybook/addon-info","version":"3.4.10","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.10","@storybook/components":"3.4.10","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.10","@storybook/react":"3.4.10","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.10","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-EhMZIHkO31gLVbQJf6w+ZaUrwpXS4r65qL861dHHH5RKcneSjLbieFI9SGS0rF4HAEB+EFTlFgkDyC8vQDWUGg==","shasum":"fb846457150b6aff690b7886d2b82cf576829bad","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.10.tgz","fileCount":66,"unpackedSize":420669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZB/oCRA9TVsSAnZWagAAxrsP/2rMCFpgW01wTBmLa3n2\nEMjFHOyqtMhZm89fuEpXzMx19giz7c9w4+Rplo9Jm7ZxnWGHfFxfim67kPkl\nlf4hF6b5i/ZMNqBtCI7bgd/cW9WHsmfzozmQ4/R3lug+hkQWSUHZi/BwQb6O\npUVybdIRPjMyMsEL4wRuYtl4O7PYE4sX+wV+uNVDcVeq8/zo2S7fUsBc7Iik\nPkvO0GKFVxGoaaBFNNAQE/3vSpJuKMshde1fPGCHSldG4o2iWBq65AaVXHQf\nOyWM7OAF4t6shkCs80nDHd4H6Tn6LH8m/ShmHEZfTVaJtzf9nb+Wq2FLcEkI\nCt+chs8wp5wtbpgEjwDjlg5a7eoSJVbvdXamaK36QCF7wZPGCuhb8daXCz0X\nYJcgzpjDf8eORyD8hclWZo2Sfs+lZInv8R1CakT1L/nA+KJ/1etJoVgilvtK\nX0RIOMCMKHMuhANGUIt/r+UUVttlHqDV15kxrqLHAqMsFZN+Z2T2//CsRkAN\n6vgCzQFKisVqTCQFFHVjrt9mz6IkL+LkQZr/0D2oMERVtRbktvVnW0Club7u\n4I4zKDEp52VtKgnmN4yee6uQgQHrgM5778n6VodWmuCotPhg0VlsX2xdhnOS\nep6Tp0wfP2a9FbPYO50nps0gEK5V448uKTVmfZ0H1iGhyB3b+NJ0IqS79vda\nuLpH\r\n=8KgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvvHh1SzvD3sg+cTaUoXRJtDoxBLtq43NtGj8phO67/AiEAlw9JqSEZlIu2jlTOOavq4oXLTMtlwREQCLKK07Whir4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.10_1533288424238_0.040737419785505935"},"_hasShrinkwrap":false},"4.0.0-alpha.15":{"name":"@storybook/addon-info","version":"4.0.0-alpha.15","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.15","@storybook/client-logger":"4.0.0-alpha.15","@storybook/components":"4.0.0-alpha.15","babel-runtime":"^6.26.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.1.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.0"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.15","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-VljAN/1jPTAe3NFLA7USzoXLntX8JgsQlX3hhczIq7IgBa/Z/chHQyt4sdSCGyy71nN2Ir0v16t+vJ3IXryK+g==","shasum":"c529a1fa7df37893499f778b427fd8011196c8ec","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.15.tgz","fileCount":60,"unpackedSize":421516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZCeHCRA9TVsSAnZWagAAXoMP+wcz1wpYD3OCiMp/fbEh\nzRFtjbdPXOqgYuSjevBlqybM8ciwVQyr5XM021TG7DhZZrIr4b2sTL3w7+Wt\nSke96wkDOSraLwUTTK+llO0f5zfHcykKZm9Hu+L+wCSmEO8BVT6gnshsD/4c\nqigdXCt5WiUxfQAsU9wGHYV40BZ7/71i9PNZOVnHJtBRSnE6HITQ9sAZuceY\nwr1zNmpLpqxXf9yztg5S6nxPa3oGKujoV3RNaq+R8q5X20ZzVV9GSG2lc/hL\n4GVH/aPFeJoeMOkcssjTGZqksggr3UVq0ijOhDafgRU8BxphuNNVcaZsKJTr\nga4BmNGKNj7Q6+oheWEWg/RTLbCDm+dN6rVU8jEJa5LfuCs868jEqyvF1TOS\nUFjILilIx/SUjfrqL2L+PgE3ANNTUSmS6FXoYSeQlH0CLmNILCQ36U2Z5fD8\n1nh5dZ3qzFbrO8YtxVWt27QA2xAmbVMIGDjeof2PBF8liFklD6eCVeVzScRs\npTN/3mie8l1P0fRZo0BBMUG2I8ucfaRWJFNyTV9a9HwxW2W4oOgMzeg8iPod\nIkooYtCpWlxAghveWXOzTv94oHYi6B3765rqErVsneWLNYDECRHaDEMR7p9r\nGPIe+zxThbMy4r20AJoDVQTjyZRm2c4NQB6lQ5Hc33GW6OATeP3AuMAqLDeg\nH7CD\r\n=lHkw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm3EpCAy8VrhGftLtto9Cs6Q/uKaogbanKvxaIHMx2fAiEA3JZVEycZrKXl+QuL2quOHDFo98BlupzBfeB+bevCMyM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.15_1533290374916_0.8329880189496157"},"_hasShrinkwrap":false},"4.0.0-alpha.16":{"name":"@storybook/addon-info","version":"4.0.0-alpha.16","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.16","@storybook/client-logger":"4.0.0-alpha.16","@storybook/components":"4.0.0-alpha.16","babel-runtime":"^6.26.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.2.6","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.16","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-mi96dQE9SK+TVBFOsu04kNNIFveqQwYryrxIFmamlsqH+r4m0PDxIZVZn64WEh3EarwS/h8DHwzArydm+iOFow==","shasum":"0f95a646cb01a1a518a1b7b6f676943a606a222c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.16.tgz","fileCount":60,"unpackedSize":421502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbaFswCRA9TVsSAnZWagAAj7sP/jvnJNP+DcjaSmNIQJg7\nag4azm2J2P5zruYkE0nRZFP28xAupn18Rytt6ykC8+E8IV1IbAamFUN/k2iU\nPNVhV3xsPpgy3WAv3KYNoqoAmORzPPAxirQF2wP2Qb+s765QOmF/vom7emh/\nlgAiprYixWuRtKEWX77xDKXuXFh6iIxVlCKs6hX3vWgc3nJwF2f9DD3ISOvL\nm9EBa/XO2klvgLg94deCaF2gXtcm6hRPCq9Xbv3/iglBBJ6kcmKaJWWU3Laf\nIljSbBBwStAqwbZ17Zkn+ypmac2iOCNDqEj0lD7cKSgvm71mlITAAPYf9f0k\nNeQif59TeUuQ10n+/TNsK8i05S9L07xnKWHSPwltnWQ/DQk20VINjF3AN+Z1\nigFckLEgs3f7au7mnkQKok3BKH3DTy/1Wk7D9QuQFwl+0YbcwtNtea/10qi3\naMH+lK/Zdy21fBz5x5OL6khEuS98F0+j4z7qxzOq9cTE+hhIMcJYABbKYHEt\nhBJtc7pawdJ3FlLH5gq5kWBcGV7Mx9rzU45Jhs+Kc4PIk58OjHwH1jlI0sWf\nXrVGsoXtDq6sIsQed+L7OMPtuyVqgLpSJF0iY4jcYSCfD4jPYx1WkjapkpCb\nLkoam/xe3Df5piKl5ZHtgQ7RzScsujN8W/7L3DqJBFB/6rV0uyVipuShufgk\nYJ1w\r\n=Wr3Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcJktjhqjgBnjUQT83NtY3nv5Kn9D8wvFfawtJYXuXlAIgNcUiTBOuVMIWI2uQWhPludQIFr2BZYz46Pg6GtURp8w="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.16_1533565743875_0.37703278197871226"},"_hasShrinkwrap":false},"4.0.0-alpha.17":{"name":"@storybook/addon-info","version":"4.0.0-alpha.17","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.17","@storybook/client-logger":"4.0.0-alpha.17","@storybook/components":"4.0.0-alpha.17","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.2.6","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.17","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-2MD0mian+PlhILMaoRgC33XfrCAUY2eEz2NETvLNLz2XFkE6UtmtGIrR9ZDop4lfy+A9WrADwm+wnsPxiRVgyw==","shasum":"dc0fb8f3446849c6e9b639a829dfc5c873e9ac90","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.17.tgz","fileCount":64,"unpackedSize":535899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgFHACRA9TVsSAnZWagAAxy8P/0zRy8vif6tU+D4URW9J\nGsJ0G9bKVeeF/A4BPBlqyqzrVfP0J1p2h0avM6+AraBw90w8PVzdAjisyt1z\ndV3ysENmAT/EoJ0P6O4D8UW7J746X3UTO+SlGyoTQoLQov9bsyWWpLR4dqgp\nF7tyqFRP+lVp2G7PxLQ6Zz4gnSwXGW4uln6W9ofl8uPzwnRdzfJDCSFjI3Bw\nScOqIpy/wn5JThhyCDLLuZ01644hptrGbW5IhaygbWALzdTGxn+Kan1CqxU8\ngbI1ZOEZs0Ko86B6PF0e1IWjeUB8BTYnhdt+Db3tlfr4AUy7Ws3mclQna+p6\n7IXmDuUw8oCLFyGxIGwLQdQ2/ZwdL4QhX0mm+ssJWtLabu61M62EYWvMDq++\nF3SCOJYgFVWJ2/n+0FtaHVA9X/vCP32fpCs5+rqyCxzcxy/uadeBToY3Pvz3\nZVZPmlorFiewiuSMYY+p5m8txEhpo4Hk3JDirWnZxlo6sUXHQKYHfhqiW4ID\nQ9kenBIHe0mgxYJAgw2Tyhm8nusoLN2qzi2nqYb+8DMcwaTqhFyl2XaNGfEb\ngemlP+QZsjm5ZtzR+IqAvufYx/plIMpBN1U5mat/PPtSzuH7s5kpUfn/GuS5\nPTUZGKdztpNFyC7MlgfU4qjcTGP9VMahq/eQbPDC8B3pgvzkPeIDAu9iyHEn\nebxc\r\n=Fh5h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZSydiOBEppfvGL7qhAvVcVFJ4jmVX/tAmpiQh718qNgIhAMTuGbkFCi8wEcROQonGwm5ecm1BVD2NkQ0U/xr5sJDL"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.17_1535136191704_0.39804903182969475"},"_hasShrinkwrap":false},"4.0.0-alpha.18":{"name":"@storybook/addon-info","version":"4.0.0-alpha.18","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.0.0-alpha.18","@storybook/client-logger":"4.0.0-alpha.18","@storybook/components":"4.0.0-alpha.18","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-emotion":"^9.2.6","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.18","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-VZPhrkszGEPJweXcm9/U+5eMMvVSmJFftD+XjOUOBN2eISe/naT/dla6iDqqO5NefQk7rt5fQvAFB7kgQB+jDw==","shasum":"ba1beec2c013ac2ea5b42aaa9e09f2d554aaec4b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.18.tgz","fileCount":64,"unpackedSize":541855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgcMsCRA9TVsSAnZWagAAV9AP/1qIcMOlV/leOHr8iDmy\nyz4cDq0whg+yjJGhbsaJbPS9bUVkH8vAPn7AMsLNwi0SUCakqEojd/yt1K1B\nsMtXsNqbFwFkUPKV9mE3ZEBMCoE0cAAROerz9c2dFexM+cQXLxXwz8BeHorS\nIfUijfk230I4AvzJBSLVxsrXNimTNJyu3ZOLU5v3/wEioOBpsh4JTdI8mI7+\nnGvfGWkgx83ekkiw3sZA4lDdMOGNbtm38qZS2gvkRVQ4+Zi+61bakIUnI0yp\nXysWvVKWEhFrVjfxIPTYj6LHQBfIE60xn8KG2ZOHOhJSmRcSSLbLi3oLzoJ1\npcoy0al/0a3jMKiyFeYc63L/iso5tkItGdzOy2GcpxZEtZngJH/KON8JS9WZ\n9RFlkHcsqY9S0WwaBB2nKKxFEknOFV/AiFtrnPovFEopLS0FBH+4Xbd3um3G\nPT6ThENtVwFq5mV3oS404R5VN1F5FSO7oU57io6Cs09wmoX2wyCVNbwu/eI5\nCmojpA+Yam9TEOALR02LWq0P0KlJ7PT1cDXI/WPxRGH4ysovq88vx6c9m+YR\nhRiaFkej6Lx/eksdvhqBzeSztyPfvtA825PO/k43166r2fbX0yHPDDPOkM+d\n3IJsflITHsRKzT+DYAgu7qoaVWsOtTz9QMPqzMkRwr/DEnFq5CpknPDzOy71\n4UsJ\r\n=Zu0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQgrflV/6/7l3n41zO9DqXNRThkDAH1l74n9Doq+Jc/QIgSWlmZ4Q8RHoPZactYQm7JEr8iBLy68kl5/wKzWy+gyI="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.18_1535230763701_0.712649104845722"},"_hasShrinkwrap":false},"4.0.0-alpha.20":{"name":"@storybook/addon-info","version":"4.0.0-alpha.20","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"0.10.5","@storybook/addons":"4.0.0-alpha.20","@storybook/client-logger":"4.0.0-alpha.20","@storybook/components":"4.0.0-alpha.20","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@4.0.0-alpha.20","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-XGU3jKdeXUK/IH3qmj80oITbTQuaGr47Mr1XW5ib+WwEC3wzD3Vhwd2ewVFdc7PlOUuEGWA7JudvZYkxWfXa/g==","shasum":"654f6e1c2bd3da229dd0f996f87fe8af4ae0909d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.20.tgz","fileCount":64,"unpackedSize":546554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbick/CRA9TVsSAnZWagAA8GoP/iFfaI3P83Abi4szNXkF\naNipb2/tm065XKB+Xp1DQy4e1gCuS6Uh61YSM2G3M6KoI4Z0YCK1O26ONlDv\n/A4Sy6y9Vkb57LUBSrHzDNsDCn8Eq3f5cMr78RcnklD9WnKtP7HIhD3v9sj4\n2PPMikaCE9qmmWatXuE/b4jhbZnakGLA4Pxye+aSlsWT5n+mlV2Qh+1jR5us\nDhD4QBB8qy68BqRmdGWzG23KEJ3NteS9/Dra3vZ2M+BZetGIlRMNPtiq5Gj/\n3pZmmbYvjKEG9WWHcV60SuuIomPqOE+3pnU7Djqpm7XsYkbShIxtOSLPCMQg\nbjoiWFPbFpsQqdvPXbqSOigBDUWx/yNmireooD7VYePjo2kCJK6dz+ULIVWv\nCn3cZlixhA95/cJnnwZRB36euI7RVd1mMzyQIxKZzTCX3+9Vf1naBgJBdh/f\nougtVVLuEVTkR98jsXRq1wgEGwhFIUo5qPQVYTa0UIezRjnuW0StLcfX9Xc9\nXjEOO5fCL2vaoaXpCeZJFhFbSrOAC7Gs5jcanEG7uyRVuq/kGfTqUe3+Wf90\n3VHvgbGSEHle7qNLbcQ8jww+6XQ6yRrpr2DDxMyafesnLupoRM35L+popTDB\nBBrgWC+Ir4PcE35rhdphqMp7iPP/+UN4EoL2gAwvLVf5BRqFGddQ4i3QMoqs\n8da3\r\n=ZPqA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCglX/e19aoC8QnB6elRMn7J/z92/iKTBqVp7Rp/m5stwIgV9bYzzWJgKl7AhD6kcjk3QNAomLw2seAtZehUAaY/RA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.20_1535756606762_0.5266161971066179"},"_hasShrinkwrap":false},"4.0.0-alpha.21":{"name":"@storybook/addon-info","version":"4.0.0-alpha.21","description":"A Storybook addon to show additional information for your stories.","repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"0.10.5","@storybook/addons":"4.0.0-alpha.21","@storybook/client-logger":"4.0.0-alpha.21","@storybook/components":"4.0.0-alpha.21","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"gitHead":"729607334cfef4a70374c3fb19d0e55b4f123cd9","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","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","_id":"@storybook/addon-info@4.0.0-alpha.21","dist":{"shasum":"98ca62333ee7b918d8f24682f365e985d6216001","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.21.tgz","integrity":"sha512-zPnmPMBZA0t2UcS5ufNNwohkNXGxcZpX1Zb4j1G9hy9L9oZsgSZEIAoHyA4BVKcUGcKm0O+dAtWdAXFriBHRjw==","fileCount":64,"unpackedSize":547456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkrNnCRA9TVsSAnZWagAArKsP/irJmiKEK242/4Ao4BR+\nUcpNHr9yboyh9w12a3ubPqOGCcov8saVvvAmk6jbHZW8zuIqLXpbsnHUdQVi\n/1AJSNOjqa4irKd1gONVrkvKk+21mRX+hVu8qcS0hYqQW5LdoE6bJ3AsaLj7\n+iwiJprvW1rWroJT5VhLs4O2FskT4ZD8EcsTT5wFnfdNilocVg9WOL0EAhWJ\n6W52zYlC5XD6LSraGP1NmEXZd/FrJtGEUp2eQqThq/GFwlf25AbPHB6cv/Qd\nzIaPsSyFeBxkC5aUb+G2sSLV9pm/MgROqNyk59hhf0xKahUvtGboS5p/6e3M\nRRAhEN3VZD5qG56c1FzgBtCQ5KpUHx5I6jeOwqPS+5eoankO4pJas1sGzqYy\n3OzzRvy83P8se0a7H+knMeNUGuxGhsIphDn2FP6sFNOK9fXEtWb/XbZAnWFC\nVZxJHh7XDSiGxY76veeSS2aqc7JdeSe7qK6c9wyLBGK4zBKYnMLjCjeviMbz\nYsl31p7gqwVK4YsWV8/zPaKhA2GNYPITajgdHEeLxo3BA1AzU3xT3KTpHD7l\nihzvfeWKAXyovF34JNWuuFNtCuyHQAPS54DlQDyE8QkRXomTYdI5wu5+Dnii\nrFb76jlewLAMcmDhAIR/+C9Ve6MEauOnBej0b2aEGQSY3GuBheltX1two8pt\nFeao\r\n=HGIm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGmLZ5N//sF2FE9Pmcj0A+GtuT8JymoReV7miL3qU/7AiEAxozjlIG60qFOQ3+rezz6sPMw6ADHlDYaAMeU9euufUw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.21_1536340838903_0.7813578718528691"},"_hasShrinkwrap":false},"3.4.11":{"name":"@storybook/addon-info","version":"3.4.11","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.11","@storybook/components":"3.4.11","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.11","@storybook/react":"3.4.11","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.11","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ujIiTZUu4tP7w/gb5A3T1iXvW//V9xuP9mfeTloiuBlHpbujIJqPg80UqoLB9ZN06IkXlHigHrhvgYcEDGmcDA==","shasum":"eb4eafb2ec5a580acdaeacab0065ee8463eddefd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.11.tgz","fileCount":66,"unpackedSize":420669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboDJACRA9TVsSAnZWagAA5RMP/2PXNYratchFjaX8Cd4R\nGLbAVI7PmpMX7Uqs16urBqmUzsyXR65FaekJKlplJbXTZ6CFJp00lXUJPKPS\nVUTQhpYElHuWoqrmZjN5gBmU9D6kn1wBPhiDGt8clh7DnO4449gwebb5nIrk\n9rcRPY8HuEoKif6BZKx5wsKmXk70hExf/Npx0YsjfRQyiSaRBowf6McFJKjh\n+CZclux9xJxSHuvDGHFes+0AHu41mWVtqbcPWlzFCWUxQ3dUnbvTzqy4/8bI\nTxgVb16ykwLSnSve0c1BvDoACDSBEV3YTKt1k7/8YEYfJjJiWJ9e6z2ofVfL\nicEw25XckhZu60w20t4EPSeZKYEkZD7pve0qtMMOXnSLsx6O9nDI1ff6zWtf\nVxn+E4NA3HNfNGfNMTZUZXphRQNFGcvTdE69w6yYUIS7i6T60Arb23AhlDJo\niQnZaV5yIXY9F/F/rT96/QEp6QXbl2vfbXB4jvEFdatnYHQM6YwpDUyGULqR\ntSEaBkScn0aZKEr+hA5lQwPqI2eV80LOyq8jPGu4Y6L7yEC1D+0pyD+nFsla\ntEib1dbYc0FsPg4yxnf2DDF4cyX1I/QCod3/Q3K0pXKY5wdqKoQAs4cHCeJg\njCiu0AS1PwPI2yQ6qKOAfuGzy9ErBGZ9THt+P8ARynAe0yXT0OztbTcRwfHG\n1k/R\r\n=iL0I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFYVLfj28mvtHKDszvR3lcp+GVKYEA5wX9ocqp4qx7mwIgIcP490pnsfvyQHWZJwvBRcy4dZqFLl6QZknabu2xY40="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"arunoda.susiripala@gmail.com","name":"arunoda"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"mnmtanish@gmail.com","name":"mnmtanish"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"teije-vs@hotmail.com","name":"tvs"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.11_1537225279952_0.9527699374977441"},"_hasShrinkwrap":false},"4.0.0-alpha.22":{"name":"@storybook/addon-info","version":"4.0.0-alpha.22","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"0.10.5","@storybook/addons":"4.0.0-alpha.22","@storybook/client-logger":"4.0.0-alpha.22","@storybook/components":"4.0.0-alpha.22","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"gitHead":"5112b520041c4aad100ad7eeb3487e534c64e48b","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","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","_id":"@storybook/addon-info@4.0.0-alpha.22","dist":{"shasum":"1ffc1585c632136ba0c03a3b38e399a9f9125c18","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.22.tgz","integrity":"sha512-cXteuJcvJxBNDgqQAviE66QURyHYSmvxzrzY7axv2qCQyD3ja2OiYsQ6sQV5/55pOhwuHDydIEQkn2fkWTkKpA==","fileCount":64,"unpackedSize":547776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJborm8CRA9TVsSAnZWagAAyF4P/0CNq/v5DEGV9ILhYdGm\nCAJt20cOz9wK1bsNElpIFU/Xw9jYRWGAjHfCWj6y0rRzlPn4DoT7HPHj38oP\ngXMs+2djbQ45qLikJsBCjH7w2JwFf9B++Lxug8wY6LSC3+YyZFe4Mq+hMKKQ\nQqLWyNaq/wmp+EesELZX+XRUZnxgKgrR9VHkgFX9NcSnP1hzemz6R3rxFPIP\naPdWJRo4omZS1pQd2jDoEh9sgkmPEN0qXSMC28mbfnRznd8uinuTG82lhbec\nD4BQCBpBaOtVLKxMKDJwRsOkBymBys8ZXc80VRhZr0eNIsyGqG5JPKdrVF7i\nJlbS4GmlhNV6x5QHSejQHhxvTO3wdjf0ei/uWBc3hHZMHJF1to3FhrEBSxlF\nLJkrBoAGTprZdDrfmuzuL9K6/8lBeabnp3GR6MnPJFlQBIQemB6JmIbDZQ0c\nWCZEFnGgj0JTMoUN3ENl9781xU2YM+i8iwGr/5bLEzmbZDlJMOkeoq9ggynT\nKzofwPzPxLl7Rp96DLRil5uCNRArtPFCjSQ5fy4uoSRpkeWnAahsCXWYkYMx\nc2W/KWz8KCgV1Y0A6bW9Z+wZbP90pFkkYT4PQRPrpvmGfk9Hb/BQqi+wF/xs\nXUy3wkAqDsAr5J1BrrDk2DhImIAyIDWHEIAq3u7jDJrZwpG3lHHMm+k70GsB\nIAeC\r\n=wbHB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk0gN/Ou8S/BECPCXb9nb1O3oZ0zq+ElSI8vx3I0X9iAIhAJoLFnePD4f1MECe1wUGivhVMwDrIv7+3mkdXwdQyaL0"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.22_1537391035286_0.27552172724336965"},"_hasShrinkwrap":false},"4.0.0-alpha.23":{"name":"@storybook/addon-info","version":"4.0.0-alpha.23","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-alpha.23","@storybook/client-logger":"4.0.0-alpha.23","@storybook/components":"4.0.0-alpha.23","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"gitHead":"2ca9c34c4c929109170b01751632858934b1b54d","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-alpha.23","dist":{"shasum":"6e6c5e24a27c078d123153bd11fc78e964ec260d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.23.tgz","integrity":"sha512-UEFquVJgMPQxwO1MusUsPRyxq2dVngMqwthLxx7aqM4NjHWD3ji/Q3tchQHK7wXtwNSws8DBcz0jhNGDb5KQdg==","fileCount":64,"unpackedSize":552985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqro2CRA9TVsSAnZWagAABXYP/RQiMqt4LKyPscy6v4FW\naok+HhhJT/NYQFwvKngvX8jkHSaiPKvGzMBlRCS3KuhWcQZ9clMsqCQkaBEn\ncvLJCpIWWSKGKyTXgMfx3pysE6/nerd3qxqlGSxPAOZoDs/qSNjkL6wnACMS\nAmKXO2t1DBs+0zeIJ27Hoa5lO6fs3SOdNK2IwzDaybbzA/q+IQwjcRll5Tfv\nFqoodH+WaT3eA0NF/5szVLa5fwI5d83m0g8JPBrdjnw89Rh+h7gxwlHtqKKH\nwYMXGdWCNXGaPDAvuxiWN/Wo4OXvF6QOnXQATmRQrpX2wguDmG9tLG3BRyzO\nckyGO87KAdz+c9J2jZcVZkPyT4dd1IUWdLcsTZoWYO5XykjSZvwpvgAE5dqL\nY5Xx5795OnxRkC/XAph4XWcovNjQrrRlpW1vq3M2AyViIjGZq3NiOVkx9Y9E\nsIj3cH/gauAE6WNMKd5VNO+jxuvjUGiiQKCLL3a5WbT4OiqiApBVDQ9QkzTM\ndAlB25YAlwI5KvuoINfCXBwbMIWTOPNFanU27OnP5vZv4le0mKw6dTQCbuCo\nQCxvsxbthyULxL55YDeih2L6Fa6PVy4AXHaLZl52eRANHKbnF80nfRgkTx8W\ncxDhhgIJbtJb+L2jH05xTpxmv/18g67/9OPuMW2ohYrZEEJhGt1H7/5/IL86\nswkr\r\n=I3dz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDt81tCkHr+QDaXy2PmV2pMXzWodAoB5dWP4co7b3nhvAiAQLCjK2JR7HYZ9ZyVpOiYok2wxw5TUnIzj7BDh11Fm+Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.23_1537915445722_0.11611749261628179"},"_hasShrinkwrap":false},"4.0.0-alpha.24":{"name":"@storybook/addon-info","version":"4.0.0-alpha.24","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-alpha.24","@storybook/client-logger":"4.0.0-alpha.24","@storybook/components":"4.0.0-alpha.24","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.4.2"},"peerDependencies":{"react":"*"},"gitHead":"bdc8120ab9456b34e2f67692cc3439ac75c4ba54","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-alpha.24","dist":{"shasum":"a7a47d82a892c350da5224754355cd6ddec11501","integrity":"sha512-KMS2eXJj214SPl9BLU9kJHVns3x36Av3IMPy6SMyY9geY6w2aYA+Hxk87HomRZi8MdK32Fa/p8nmAo3KxVYrKQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.24.tgz","fileCount":64,"unpackedSize":552985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtc8ICRA9TVsSAnZWagAAS70P/jvR/rIVATBNs3g6E1i9\nnvttPQGvVKIbW+56FBSarnBFcrEUml3YdZsaPghX5hyycJR9OvT+uslgSXxW\nzCCEefLzK07eMf1V+80uLtTe8suRqxUBDIjqftx6RUEpJpFEBIwCGH/VvOcc\nsQNthhRPjunjwU79OShEuAB03/1pJDsVlpIRskLUyg5hvpUIt1QuzlB200CE\nSf4gXoFe0Igmgn76hRX5oZR3C1m0gJOmgFMS/RP3jQ3tmvCWB7vQY++I/uHq\nWfkLB44Xvf9hWr2SPLZtyS+poL33s0GCHU4XOCMrZjHAy5nYtvUbUPbM/4vF\nyVt5o4scgUVnd20Bh8lckMrxgnz9O4CODlm6gBtAI1uqHMX/1xofNkvCIkYN\n//Ofj9dUr62cKqf9329t+1HhD39+OM0SvMAtqTSGTJig7Dqcq4rQ/muvr2Ob\nB3XYZB94pDI2kijwHkPB0WPIzVYCE7Z2kExVTWErbzBzuUgLUagYnu9j0Puc\n4oGk8AEskpUw7/GpaGtPquiF7JzlxnXDq6sM2GxUf9jByis1FQkDOJDaAMN0\nyO+uFfQXgYZApiHerSBeVWVlWqNC621HVGPWd3me+WyR3clKe+24aaX28m4e\nJJb5VZMJEMJANf6t/TP4mwAOFEkLZ7lEN/tF8U1KOIXd0kAi9YQIW35Pfei1\nojKf\r\n=IgAF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuhq4gcn0s4s/vXYv4u7VIEkd1cLKImPxVDECJHUkAKQIgTSUbHx72l9QS0k/XzyQu2Fzg8/RqlVOJgt+DVQvpSQk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.24_1538641671565_0.7679779877600115"},"_hasShrinkwrap":false},"4.0.0-alpha.25":{"name":"@storybook/addon-info","version":"4.0.0-alpha.25","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-alpha.25","@storybook/client-logger":"4.0.0-alpha.25","@storybook/components":"4.0.0-alpha.25","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.5.2"},"peerDependencies":{"react":"*"},"gitHead":"155afad695926070cc6426e98d795907846f1207","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-alpha.25","dist":{"shasum":"c95753b60844d2de702e4a86d7071ea5c9c664e3","integrity":"sha512-IsE8IDxaXOByeZp0sAIzLt1LjqVtPcLtHgMQpbb2X9wcH9CbQ4LNf99gjmsvOHKgjPC5s0BiXny9+Ltg5XsB5g==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-alpha.25.tgz","fileCount":64,"unpackedSize":552661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwb19CRA9TVsSAnZWagAAh2MP/0/EbagdouVKKwCUj6dE\nkbe/rk1vdYbGfnZAfk5iUDgtAKouHXRtzoRb7rlPTc6utm57HLQEaYcBOyct\ngvBVq/a4Jn1xOysrRDQAGeq3U49iGnIH8vDe4rjMaAQRgZ37hyxfzkdtvLUs\nBC427hFTiYp3qSQBgORWPtTcAZO9zSo0wxhKoNbT4xwjOjOLGZ1CxzTjvmwv\nDTP5ZIhgBNYLNEIHqZA/ik2QmHX+edr15KvpZLXydWJWMEvXyGqgBzL6I8nH\nehggwdy4O1kc/JErKMQQw26TeLAWIsrAsgiikyAqEwyCOFtKpeo24HSZNrBw\n3w0EF4R+vH5DlTpJpXwzBVGnaCVQdHDK+1c5GUO/25uTHYWnFVLksuD4n2+6\nzh4ylyCRHWIjU7u26qwugr7OlJxQLs5Vgk3hk9glegsvUCubX9vaHHsIIJLz\nolJUCCsueLJOshRNexymNCj0sYOk54WrcKTNCtQFdO6CnHG4bOb2ptTooxmQ\nb7ue9GnDaz5Ad7teWqY+48URab3cMZvmkR2HHQ0jwbKxajg1d7xR7XH/MXhp\nOUCin980E6rlUqlVgdDRbCX1Zcu3AAtM3rQ90TyVVCHNmHTQH3lP1ddF0j7x\n1PWJSjzNJP6xpf6X4+OTMXaAC3tNo4CGL9A5D5nmZZxBwde3EnDkSgD5mqgJ\nbe83\r\n=ATQN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBMl48N7E/2uPAqstAmwE54vL/HV2SmQvyZKZBbFvp0AiBV8AkYb2CtjtMDDv3vUyXhZ/bUt+5h2M7AeWmGzZL5Ag=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-alpha.25_1539423612998_0.3316374972530298"},"_hasShrinkwrap":false},"4.0.0-rc.0":{"name":"@storybook/addon-info","version":"4.0.0-rc.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.0","@storybook/client-logger":"4.0.0-rc.0","@storybook/components":"4.0.0-rc.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.5.2"},"peerDependencies":{"react":"*"},"gitHead":"76b3c817a1906759f75ffa91f8261faeb64855df","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.0","dist":{"shasum":"7038287cfe8ef2cbed6425fa8f719d3d708afe83","integrity":"sha512-mORmnghDrSc1ZrtkNrR6O2Mui2q6uzAm4ptXKqDTkpOsa6zoFhIcKn7P4gAkwjOUccSPxtdpLTVTldDf/wWR/Q==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.0.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxLWSCRA9TVsSAnZWagAAs3sP/RILOl+egJr+0Luy7S43\n94XX3BZl5rHYK6wZYCB+NYJmSfFJIS64IgJtshn0j4XNiTWUT5sijC6/t93A\nJdVd0emv/UVbCu0vfS71x7SjHUl11q0OH2CXMo7VO/aSKeIE6ceGglaAbQ1E\nWgJqr9j37C1tHLjh4T/bmyXgoxWCn3rXheu1QVxNh98nZpIesT4RIJFcA3/p\nedznR+2EjFWZACRs6fKOstD8tKr9gv+6jH+RWODjdL/WrpBV29Tzi4BRpeML\nKMHniC6IMmQwNLsFCYYggG/CqaEnsGhtoUcHbKXv4kLRtvwmbKNfV09nXBZ2\nd7maYvpur9pYTOJ8DIJbPs9X2VuSso9WcsJHtJLrKLMeneQqf3znLBdDqQ30\nwChX6Bie0WR6tGpY7sm7apykAFNffRMwvjFayxc40vEkbsZ17DFcE8HXR4WM\nBmL8Hl9d8Tb67LExI1WGeDjWbw8YX2oAfgsuTnQeq1KVjQN8fBuMhnVlpjPp\n5FYg9jODjvXo+nl78LWTY9R3kNEzfz6ML0C8G1oqrtbJR46nYqEBnoaUBLP4\ndusCX53C0tutUkRVPO/Rq2gyx6M2TQE91XWjDa7TufytgLtqrjkR+2Ud/rlJ\nJ0OjpvmwO0rXfJ1FBNxEISdSB/bioJ3eakDILWXjJaem5r5VQA/KbduVfo4q\nILT3\r\n=LzJf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSv5E6TQ8DrleARHO2JEaQLgr2wnypRNRexpP6sa4zKAiBb34EHfxjj53xAb4sJHFwCqZ+sEMPb7aFQHjHU2xvxLQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.0_1539618193919_0.21809143908022754"},"_hasShrinkwrap":false},"4.0.0-rc.1":{"name":"@storybook/addon-info","version":"4.0.0-rc.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.1","@storybook/client-logger":"4.0.0-rc.1","@storybook/components":"4.0.0-rc.1","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.5.2"},"peerDependencies":{"react":"*"},"gitHead":"46d89b3e617c500235c68e6d33067c2838c55489","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.1","dist":{"shasum":"30e76f0991678e9b6203af34c746f7744865b23f","integrity":"sha512-mCawdYJkm6GuQS9Q60qcGpeCGwFlYw0BcvjNPAbMAnZjjtGG74mCrCBrOqmmsl7/m0YT20Gnkxpmvj7qHxR0Ng==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.1.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx+hwCRA9TVsSAnZWagAAxg8QAJgV8b361WupEBuVBjlt\nitbAVC+FU8d+VXJKaXxQ+e3gmahGo84xXt0hq1pXRH4C5Pc2SqmIPiTiIH8f\n6cg2IiuFw1QPk5Xa4Uqb3A46691KnejTo95N2uJvDfk3d9ry1kNjnnfEpUN0\nN+va5Gl2KOPKOEzeUm0/FjiUu6y7f6ombQs6A7kWlBB1q2YL2kneYYNbg1Aq\nSVcc3rzg3qpQZ+BUK2izzkiFLZ1OyyjonK5k/9UlVX/aZUSgqodFBcjzCbZ2\nM9YwWI1Utll0wjkkBvnWdGe2q2zN2XK362Jx984lcmzXMLJCqJPX3VmtmbiM\n7l1d2iSdcUY/m60QnIExpSDGh8IlfF5hBWYo5TPPQ3ePD5cO3asyeoVOe35w\nE2+V0QJAXsGV+FxMGjWnWhfIaOJGzupSqEk6QJdgw0fuKYJg/WR7Tqk1Zpxo\nfnCUsXdJKv4AIUEEU1UUCPrIGeE+Z0D+BpEhnyROwP0zr2lVXLYwrDdb5X/m\nH/nozvx3wKEb0LObLKGfO7V2+QKAIPRcTGthK2FuCHrsrp6iU5zinKyX0P8t\nXkihGOyEjKMrYG0MjuAHeWFT24fDKSCpuN/Tihy31mUi9C8szFcEQNsE57WC\nri2gXwBEtCm8Bj2lbbzqFRolo+AmRva5J7sRHzzmIW4kk8HGHrdTvIC2c7te\nUMhn\r\n=42+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcSgO38/UWnnRdIC5xH/v0P+qgr0KWUcCqPYOeefK32AIhAIRj/Rb8Mf3cddXxRdvR5qcnypOHBJkvFHGRNL3eP2zM"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.1_1539827823459_0.9609707401655827"},"_hasShrinkwrap":false},"4.0.0-rc.2":{"name":"@storybook/addon-info","version":"4.0.0-rc.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.2","@storybook/client-logger":"4.0.0-rc.2","@storybook/components":"4.0.0-rc.2","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.5.2"},"peerDependencies":{"react":"*"},"gitHead":"8fb0caa37edc7034a33024e9dcfa6a416857b7bf","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.2","dist":{"shasum":"b5ee0ea39945727554c038a3dbf3e349088822c8","integrity":"sha512-dmbs05TXzTHb/29j7ZdcseAnhAtTbXa2tD/+sJDN0r8fvMjq8j9XcoH5GxxbiPfzEaW/y0kX/u+IPszvfySKDA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.2.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzdPQCRA9TVsSAnZWagAAS5kP/0NKFLwPGzhlURET+eIu\nWkU7tff09vsQCJzM1Aqfgf7qCka8F+B75QaH2Dk6H9z3pO0CNZRPr5E2dg3l\nxbwXQxE0bi2PXaPnkedS9KCJpC7m5aVTmjsH1vBfx9u46U6RV0JamJ4x3hz+\nluvdK+q40YoJOpGk8mw9hkl7NRnLOXylGWV2sKqjfU0WrZyvYoRSrWGuQhHY\nG0ywfALGNAHXyZdsjHGibHk6AqJYvDVFJZRBfCFwb/x22EY/+N+GrTAzDRn6\n+CKYjWjFM1n2TV7SKqFDcxhqM9NUrHdY0V7i4c/kcadxvpjTf93KBrRNJo7y\nI6x6HS1VOEbFprn1HPytV7N/PMYS4CsrD1aVdQgUl04QA2SQZRZbaL6QpufW\nvrfHE33lN2ZpHtf6BPuAq+zCGuheJJmMJlIkZboG8eBeRVMtHEn7or1JMqJv\n6M/8jPRmM9PUbCIuP4GAy2TVVFi5xTLaAqWGSp/1Il8W24RBx/cVZawl2HW3\nWAqydm6mPhUK464rNY3Nbe3LAFk61BkWsLUtiUpH+qKXfdvWpZeqxUTS33Ap\n/gFdivMVCikHi7G2b/UGWaggG4Ae6haudROIQSPmQIgUYPXfUaOOzegsXd/Z\nkC7z/tQKgkbSL51jRH/HJaBcePJgzOhaBVCJsRkmv1SG8ynohA8ZvhNiMl+x\nhKRd\r\n=b1G3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGM4fa9nHwT+E7uy/a84raBPFHoKuRvrgsxcgcCXmdYgIhANmIZ1MHtkcvEP01Fn6+sM4KBPQSDPzu2NJVBuMXfdgs"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.2_1540215759444_0.49802707762207277"},"_hasShrinkwrap":false},"4.0.0-rc.3":{"name":"@storybook/addon-info","version":"4.0.0-rc.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.3","@storybook/client-logger":"4.0.0-rc.3","@storybook/components":"4.0.0-rc.3","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.5.2"},"peerDependencies":{"react":"*"},"gitHead":"284fb1b4c2fcb619ec6c61af4e04f77df1896bbe","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.3","dist":{"shasum":"8f9fc74ab13910bd5204c95aa07a248dc16fd21d","integrity":"sha512-5JKs4UhdzARMM3UrTBb9x4GabTXCQliaze25Il3XdTdY6jWDry1YLaXlwOaYqnWGp7W/PXhhVCpbA2Vg6jXmCQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.3.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz0q+CRA9TVsSAnZWagAAzSQP/13HJ/VTqbpSDpR97tW/\n5ctq95gQBV4p8Lf4/d5/owDPYaEmuer+fAeQUErwpLTQz1YtAoeBZOJCcjm/\nFyAwy+gpLV65SdAuPYD+TYriTwmguD3xTcfaJi42fz2bVWx3gcOFc8oaklht\nwh6wlqWk8V+/5vJHab7Fj33coW7Z2mT9K77MrVkB0BFckA++0p+m6rOD5M9i\n1klbHdpJQSUqDmfgRpe98kfZPsHqmoLj0+5EvoRd60Sa3iEub+pfsgMYZ2yy\nKuKmtahJR8lOkMRURJCPSEcnEIHnvbOljvuW6y0DJzONBjkTeAVlwlc6PNUG\nPlkcY1a7OLTvvy8DdgicTM0ymOPekDGehJtSOwu49vKstFfVFOuno+isk80g\n2Qi7kRDB/RAcrDtoGuisoAuQp3w4sEVPVj+ie/uX2oD4vNESYdlbgygecIuL\nSOwbn/vx2oPyPc63nznQMkZcVx5H2V/u8bhfdV+qpgoYpBYmrmkXZQi6PEp3\nMFIcz7UY+3cIe2/1gYXtkLt40YZAq/2P96C7Hw71TfGBQDi+EeKAJ8bgwvq/\naSVuPP65JShdOVBmrk91qPzP3yUna1waLDmkZ7/sbQz6gA2Mja1Jq0aCIO6l\nsEVkrGAB/ZM+Vwpq7zu7HPBpXnLOkKoWsMm2qdUSOIuinW1daKj9A8fKlh8E\nJDRo\r\n=YnYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0U0iXBZ6T5W1KSxx3mmgTrWKWK9hw+qD3Fedm6SR0kAIhANfvsWWRyr5egtrTIiI+yTc9BpxjssUSyUZkhWQQRtQz"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.3_1540311741515_0.17434426712724238"},"_hasShrinkwrap":false},"4.0.0-rc.4":{"name":"@storybook/addon-info","version":"4.0.0-rc.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.4","@storybook/client-logger":"4.0.0-rc.4","@storybook/components":"4.0.0-rc.4","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"d7bbaeb132ef759c3d3c0d8ee7798e54796b692b","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.4","dist":{"shasum":"26c61039b91fbe4c476ded004352b766760dbc7c","integrity":"sha512-gTMUPyy7H/Ozt3nfLLin09h0/8igYKUFCuRteaHnkQNNGzBZMibD0mZu8SHuhqLRQ1yKRdAz3xB14RvTq07mjw==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.4.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0TFFCRA9TVsSAnZWagAA+HAP/iUb+b+XhQowSI9TGNt2\nMYl7sBmpaqIDEF8COVYVbGvYtB3jX1PGFPhtORhE1tA3ZpDtne0FTKN0ZpCt\nDlt1UXOKWRIC7XMCK3AG727EC4kbGKZGypsfxPSLKGykHNuVHY4azHBpL9rm\nSo99EBQXntcVTkTLrTOy+5MsPakRj1R8I/KWwQWHtNWASDyGllziBifIlbe7\nym0hWd9rOvE3f2UkSNJd+a7guZk2vv8xDYf9nIPa9o40TE5dVfIy3OAJCi7v\nBmWfXTgipld5Ed0JiA/JHBSb+kyUtwrUK5FIuU6I5UOn/2p9yPM8tu3scsl1\nuu/GvGZ5XQPfM/Cs/XtgbWsPXnnShT02YrXaeooNB138IE4riHUU1J1L+hXY\nxkk82e0FYnCw+DLb0xgMswFIYBra61owSVYFocsx//2AZE3bFCVxFTW7IgW1\n0t3RYZ7oL+Sg4nCWocjS6tnqlSuuOdUpXlJW4rSmrn1huBZrsfeIbIOJW6JV\nlGhDGhaygD70pN6/8DVZKCh2+SWLrjQ+RJGiddZ6Ka+gi23a6yCicBnPXNq1\n4Fwfp1kvN4Oy9mavDkxU3HEIUqj3tchebWHBhu0ct8RSF8ed3LldikQ3aBL8\nI5qn+Pj00Ma1QXM0ueUaSl6FrhjqnvKOSiWyyX/dRjZ46XTZ9kWSOq1H4dh1\n0x89\r\n=MGhB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDduxi6lTl7bP81sS0AgHquLSDuBGnMkqml6ye5TRKELAIgRyaiSKtWCLT4WtzwPLhnosx2FMWUPkxaqd4S6zm9h0k="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.4_1540436292605_0.860213527754667"},"_hasShrinkwrap":false},"4.0.0-rc.5":{"name":"@storybook/addon-info","version":"4.0.0-rc.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.5","@storybook/client-logger":"4.0.0-rc.5","@storybook/components":"4.0.0-rc.5","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"9cc644cddec3e4b0079aeb48afa457f432695e3c","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.5","dist":{"shasum":"d6e504a5ae4f3c3e1ca1cb0d5fddf8f0ab1ae4ca","integrity":"sha512-ZIhccrbkmlm48bGlE4tmjQrANOaSc6M+KbXv3CmmHrOPwqf7qReW6MMJWFEUPH1cqHrog4WlvOMBXbYUMQ09Sw==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.5.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0TxCCRA9TVsSAnZWagAA3LUP+QDJUcQSOm9wmz0Rf5Bp\nYNIfWm0zx2A7yCg3K1B+u6mnVkXrc/s0CdC/wTHufSIhX7/mhNgFfzO7bXzH\ntUhrTOaQmU8uCcyt8pLdk56VxDtDghWAR9WIWW41cBsL3Oa8EoNPxDCf9Afp\nx4O0Gs7HLYide6XGQ44cT3qfwqQhIEvXJzTowvjPrBeUYt9INv9jhzHVcXGO\nzL9y3RX4QdcF7gx2eFOj0sd/+k4zgk8bh8zwz/Eo2N0SLe24tddJwuletVK5\nbf6F9gqFg3AWhE+ZiN4TPp5uRuf3A9gn0Rx4ETzgipaK5jWE/J680NBwad2A\nczxW8iGpq8UBAevBr7UnX37vC8y/IbExff3xOgBETu75XVOQ3sG0mytbf1iX\nMkrphrm4sRl6ZeLV9iLOVF7aD0D9rVgS3Sc+h+WsugCnhyP6IQVy9FKEoPz8\nEoMqWVotdl80vVboNrwG4Gs6vbxIdBdi9/s0PMR600pDMBRZUpoqzlGF05rm\nS3sEuE6hTGMM8BLETH4frBGOYUVTOltpmHIkrKnDFwyYeIL13gLNiIXynPAB\nF+I2ynlNYSoDNnxDlArjaBMrmXcCMbL3yUfVatZI2HhwBQYpTeKG0THcJSwG\nE560OBLjYPxpuMR8rSk5hy3nqlyGir7GL+8TWNvukzIE1cwHM2R3kYQN/3yR\now34\r\n=0aCb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElq+VJCSd403nihDrT/a6Lyg1pS4Z/ReTYLpZ4D8hVYAiAcfk8sUDd7Bp+4x36CnLdI/4KPMR8Uv0FoJ2ESYiLN1g=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.5_1540439105326_0.40708667021374123"},"_hasShrinkwrap":false},"4.0.0-rc.6":{"name":"@storybook/addon-info","version":"4.0.0-rc.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0-rc.6","@storybook/client-logger":"4.0.0-rc.6","@storybook/components":"4.0.0-rc.6","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"b3417c8134ce651264af9f65f65bd5b3ce54f718","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.0.0-rc.6","dist":{"shasum":"a8651dc60cbf49eca215b5fb8ae6738574cb7351","integrity":"sha512-ckI9yn4DlOmHuJF7q1ji4o+j4laaycRhCESNnVggdyUrGU5aG2cl+g7zBOqVK/lw5nAueYDUzeg3y7rMy8LBJA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0-rc.6.tgz","fileCount":64,"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0UjeCRA9TVsSAnZWagAAflUP/0a7TMM3kZxs/39+Y76T\nXZvh7QKgPSIV6oStrXtEgBKMECD4H5j6sitkzzvXd5EUCHd6v+19r/ocWSF7\nB/9wtM06xSD6Jwg5YuuI9NIm/9qASDLYcsa1Rw7X4E7owRBJqTlJDdQHsikk\nqs2BeUyT3AYGdIY/rXnfMW/Pg3h8ElKYDIcNtXx0w1gbZQFgF4eRUk9N+ADA\nctb/2IBAzJTqRUpryOPiIPWeJvLzg6YqeyXareAHwpXLqFiD+K+Kc8RYMayK\nUJhIeIHY9B4Afs+sUAvhsZ9BR8TnfDCGFYz/HGv7+dgnPHD5CYKLOz3XBxWc\n96k8819zeqDoW6fJRw+SwT678N3RIrmELRFXa4cATIwaMFb3ttaHJPt0KQ11\nD40NeNCqvE8tIHuT7iiavOAo9XtHqLdIVkvCoeM4ud8ddqJBWvSpFOkoSgZe\n5XFoC0uhI/rZntyBldKXgCYJMozxSoDFBYkhSeNOHHeWU4vnR/4jvT+bH6yd\n8ocYepJf5W0fWS2XMPxDCDu5fOSznvYQov+KDLaI4XsMBomK0Id/oYG1Z64V\noAhia6fOvtkhAvLbG+h51Cc88S91AOr/4ZYxtxiIwSx76LVmySlnVtk9fZNI\nVVb1X1Y+PFOFoyHRTmnpdan/om/pxd5Rh2XU4USaA0MJInWl5jdNoxRhThEy\nrtkP\r\n=fy+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1JiPELkP9NYgvEh8ZhrkaIgBePvMQDf3alMQuUNqvzQIhAM+gIHEou6vHSDr4wE2a9fNuYDHrcf9TIUt9JjqIO3jM"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0-rc.6_1540442333283_0.18079838539631132"},"_hasShrinkwrap":false},"4.0.0":{"name":"@storybook/addon-info","version":"4.0.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.0","@storybook/client-logger":"4.0.0","@storybook/components":"4.0.0","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"8dd9bb346153221c02ed495e43ba02bd73271875","_id":"@storybook/addon-info@4.0.0","dist":{"shasum":"6d3b9b1f154f39158fb2c58c9b028e17aef5c359","integrity":"sha512-sMwA0y9sLj+fs/1fiuUmHO9l2nOvuDGXg58EbwWfsnuiPQK5b4m4mNoZOaANRqfXv71fsvTD3oQaNoDtTfXnUw==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.0.tgz","fileCount":64,"unpackedSize":552625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb1nF7CRA9TVsSAnZWagAAz8QP/jJR5yTI6FPPI1HCa8lw\nu1WiisP/oCnOxqIl9/y0iRp9nO6MOW4oJCOeH5OrUK/H9Qg7D6sCBn2Q12uw\naP0ggYMxaLm46xwN0BZ9ewaeJRLyFqL0QW2jp2zBtPXKtATvJAp8Lmay2fZJ\ngu2AGmlcfvHpwRhh5lyW94O2hg5FAAlEKQ0aKKYYp9maKiDYl6s+zlbVvKSy\ndsE6MOGs3tZBYi8hhD/rhoSu+adG5zNJrPguhD0agHXGtnZP5W2pF4fb7qpX\nad+emgk6aXvVtipOrj9vMIR0Hx/5S8dEiQ5FS4H88hxjjezjE1loOF7szIFl\n37OGm+GuVdmQOek/SW6GLkptVW9MBAzs4xlvBznLLCh1MKKZTtkGH8LZLV1M\nLv4f5nZxUCuJPmRa0Z5E95VcvuXGLCGNLm0T7UgACOVSe/zpfrrrtl/wU6XC\nMnZFBjaLr6LW9yZxyjoa4zEilDAa5kNEbLwjG1bjSfPC2/4X6sZApWGObwk1\non/KBS9XrV7X0H3wLgp6NRZ71Ng7HCm3KclQB0hHN2m3aC5vHN8PbcwJ9aEb\nGVmmPOtituwUrqJ6zSBts7SGxF/HwHwgkV+twT8lD209ktnqs9MvyvE5cF5F\nO6WTTwFtJZoSzC/wUwoR5IvsWMCg9NoFRyyCakS2aJJU9s7SuHrrtjalPEcp\nOvFR\r\n=bwwg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwqcda/XAZqtUDKVfR0a6xdx59Uejw5gXjbH2mPjJjcAiEA7KOGCbi5zghp3/MOiFuO95kGcbyhuVFLc5TXy6lfqpk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.0_1540780410508_0.5477395354665282"},"_hasShrinkwrap":false},"4.0.1":{"name":"@storybook/addon-info","version":"4.0.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.1","@storybook/client-logger":"4.0.1","@storybook/components":"4.0.1","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"9d9f3ed7bbb999eea86b898af4299533481c129e","_id":"@storybook/addon-info@4.0.1","dist":{"shasum":"04080cb86491f59a839df55ebbb058272affa887","integrity":"sha512-5wZWP8rSjC367eEjqnMUFb8YQlMHQzfMunuJXha+kn0h7W+mfQKWiipGaRBdUt8oODnTnSyR57JU/J0R0SW5jw==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.1.tgz","fileCount":64,"unpackedSize":552625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2VZTCRA9TVsSAnZWagAABsEQAJiaNVGU7sAkGMtKvkeL\nB9unkLXVMR1dIJtds5Ec3hC3GT+6SO52Jw2ax+cC/i4KFEiRN8FRJiXZPzF2\nNwBMmlaHqwrWHqrbUR+sOiMxLOatcPKRcT7OnpXmPR3Xg0JqZ3t2kqjk7wY7\n80B1XNCV9u2dakV1vl3Bx+IjWCgbv8cTpq58kShZy0lcupBIORk+SsDSVibG\nesF4ZhxYYCTV0mkrR01Tk49n6VLUiFajj9nATx+p+Gj87Ols5W5PjHVHiTQz\nN7CX8xi2T7k4Wpq6b34+6uY2GgSICmgwJ2422NIXH9tIuWcwosr8a0llpEHM\nVVtQWLFV6hsWgyWyK/RgASZ+iqzwGzz5KWW3D7TSu/EfDZFAmPkbjPucI6qa\nLu7Dnimp7bzKntz0r+lR3s+bF4sphNM5S9v1fTjUJW4ra0aSVGLZZwjNMHAS\nPw0UYsmwYMX31KY41Ef8fIaLe2HcYofWPiULE5zsRJSOZQpbhMOsgZaOz1Au\nJJzAZOmEWNUPMRz9NjSfpzfPcr4AzLF/7qBQuNG37xsoGYqBGyGdRyR+Re9Y\nRjE2PVnkRLBM94z7n0bGADejY+z2HmH9U0z2T6Dz+ND5WW+ZrdzoySp+hUP5\nhoV1ZxPu8ouTvWUv6m8xEmYixSb/fv3jduikXMF3TX4zYl94h+eg3F/YjYwN\n/FeU\r\n=oAbX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPOwgSKM7+ykG86zzxywggA2iKiClB/eoJxJgM20OiuAiAx1xGy57qpbmSGnHPjpRbKMSc6KMv+bGIckFt9fAXL/w=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.1_1540970066295_0.8326450094532001"},"_hasShrinkwrap":false},"4.0.2":{"name":"@storybook/addon-info","version":"4.0.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.2","@storybook/client-logger":"4.0.2","@storybook/components":"4.0.2","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"037f6cf3a54776739c9ec124a927657935b5c6e2","_id":"@storybook/addon-info@4.0.2","dist":{"shasum":"21dc27af95eb7e5a95e1cb9aec829eae01ba77e4","integrity":"sha512-w/4+E81lXojWpeiyNEYVmHpEpnczaGKw82JMfXuyk0A2d/drKjeQxkUyfQeJMzF+IY6+oFXjbUUwPDmPp3aJsQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.2.tgz","fileCount":64,"unpackedSize":552625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2Wz3CRA9TVsSAnZWagAAO9kP/2XzFt6Od/Q+kE5EuyYn\n0EsbUJov5AR4yQwBNPxY1MfUgLnk+OfSev2JaUNhYkjNUQmHV1pG1r8BtgIR\nvFuiGOvqUWG+L+PLHiAciAR29ov/0UoBUAY2iKE7jSC+GZt5p7M9AuKt5t/3\nB8NA8AyVGpk4vm2QhPTN4+U1RRgj8otrvoR9VgU+aoGKZQMnzMmv7Okn6JfF\nz5DZOOBhHzDRUUv4T7jbyswGzhPcZphj+dCbCncNVgPqXXxv35Tp8WUwWTxu\nW84pkSC0a54/ZxXvhX8TikjRSQpC8ZrA7pRGqYJAUZ/PGwn8RnjGwrq3JHgz\nmPo6YTpxP2RIxkokRxb3pYiJ1RWxNEu3cwdVj/Wx7nvfAhkN8m/7NgZyukkq\naWGeHzqdtvqsyCpkuOwBJzio62AMq5Pp/6u6BtoAf2U7si2Bsc8XGAysxzVv\neQpR15Aphtxa4eFfjSInGqcY/LK8H0gcx0rHtBH3Vzx/Na1uHgpqXPPsQyJV\nmAp9ejTUOsBSyPnSRPqoYI83D779gdjZEk3g0FplIPJlWnoIkMSHq8hC57Ux\nj5ih5vcz9zNvdcMEe/icSX9rT7RJuu9TKQ6YcYGUG+hajwVVr0SknQu1Cq5L\nvAkvFYXmMKnkp06Jm48YK8gS4BcIt3oSQe2X4sgdjS1FeAf2OgsVwPPBQ5s9\n5mww\r\n=wfit\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqSsYu3pIvN3nxabrAqoN7pHVKH3DUYNPav7X4gBMUMAiBJmciiNAPd9ZPtslFdnbwbNxq8vMWXn2+uUlWKaA0NeQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.2_1540975862292_0.9823365552939105"},"_hasShrinkwrap":false},"4.0.3":{"name":"@storybook/addon-info","version":"4.0.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.3","@storybook/client-logger":"4.0.3","@storybook/components":"4.0.3","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"b9ae585f9c7ce3327b4da400b917b04d8596807d","_id":"@storybook/addon-info@4.0.3","dist":{"shasum":"d6f497cfd0ae38cff0ad3970f11e271f5b749a83","integrity":"sha512-ACwK9Y3OdeBwzIsGfZAyGwzNHPYPpCZV8nEQn92ODjUUc8n3rnGUeoZa+/5e9/5NmmH44JQZI819iFTpEVvPkA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.3.tgz","fileCount":64,"unpackedSize":552630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4R5mCRA9TVsSAnZWagAAPFQP/jKzZXv6XvpJStUr/8bE\nnz1IjCc+TaoiTb+05ztSlJkgs4xDCgjxOQjdtQVdUaMKw0PllMrYgejQWnKD\nyyn1DjbGXz1c7eHLu4kuDbFSKSCu3+SAfyvGABLTRYT4BfuV+zkNKVeyQa6b\nSV8i2iWWGDlS7+bY2qalUjBh4UaSG0EssDJq8zIk1sPARgc1868CTIjaSw5h\nBVeKczpFMdLcI0jfYPqwWStHlitnVHS6JuwyFOaPLxzp7Q98XVWyJ/NLDDpI\n4twsWWNv3c3i0F1YI3D1443b5B3RlrCCrBhG+0SUnJe9Ec2eNcGKaOXthmMm\n49C0uYfYdUBRkGz0FZuCTp9AD/1AIFtg8Fo68PoCYWHO4LcuFfFkcQ5ED+Bb\nuh6riUllFE/3uT/qQSIzBLUIbT3x2kVHrkuilviLSNq06jnvj2N8l/A14KrW\n0nlUPY+NPCGi6oilJNvEwakY8kDiym1jgV4KG/+f3QO8O8AwFXUDe08iS3uy\ne0frTc0d6e+D3/Bv3G+jomeuIBd+3tdmYHrL2hpum7MkROtGaPdNj2d6hmZW\nbPWSpZawA+tMSYr97ZJcL/DhWb4t/SUHtzpz9lHA28UgLUoyAigoe82r6bEs\nYSogWgv1pJrFcq7fUBIXBmAkLHBiP+SUnW58zWdOJRUFwG2TPLAw4627yf8w\nq0ey\r\n=Sfoe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJRv5HK7R0Ck75utZdJQfapBGA4wJSpIVHKh1YjHrNKAiAGo4jO9YtkS8I7cn3Y6yLIaLrfTyVZSWRaSASDzZPreg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.3_1541480038060_0.32833023960079233"},"_hasShrinkwrap":false},"4.0.4":{"name":"@storybook/addon-info","version":"4.0.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.4","@storybook/client-logger":"4.0.4","@storybook/components":"4.0.4","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"0cc22e4b2769339e0fdf8980e572bfe950d4902e","_id":"@storybook/addon-info@4.0.4","dist":{"shasum":"3305a3e9a9545d439190c3251a11480004825c6f","integrity":"sha512-NvielclJCyZqmnD6fJUBI3cANofFaGCGRBLafz5ID6VEPtVNKDJgY63olpM2b/37YqkdteYgtbCBvYWeIDcfIA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.4.tgz","fileCount":64,"unpackedSize":552650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4SlrCRA9TVsSAnZWagAAFOsQAJElwff0jC8UVmSrQfn0\nkQ1w2MQNK3cKl7nkHOTkwjSmJ77y5l8z4UtU9gktL7j0mbtpGJ2QIOebaYuD\nlGISt+Ekh/kLf80/Q6a3vBC7Icun8tJmahFXTQNKIV2FvL7QOciZ1275/uba\n90wZbXhpsE368aoL7Q/WJ07PNY/gPH4QHETTnT2JLmXuuNadAfURJq/DgRRX\npjbWkI2jKlZsvjFaaOUXr54zejwTNRBQzoNT9mDtbyL5ABoyo1NGlLMCQhl9\nhdu/SZjApQK0/PIhSPprSaUIJvH67Sa19yJs5frWMrGXDMBGXrLKocRSOJUJ\nfOpcsCVPRQ8mEQmit1YUCRuWxbsOSKgo7gQOSuEKT1rPXN4X7QShnu2oznMd\nC0zIm0lWzFfT74RGomh3G+ZXJqIRucqI9GBn+D7By66aBVFDxdk/YavyYhSX\nIeW9qjeMQyPrcpXzzWMRz9NlaVW6IUgZXKMRueS032D1Z5F5qKlnY16jMtDh\nETJ6O3Wg3ETFtXTsc9AGlhhwR/ivY9qfYUCR+S70Cvr3bL7lOLCrJx8gxTU7\n2VvAzYvbIF4ndpNo37dF8gmBZ7ofhbm7YJLUqJZVSC3HDmptBz2dRdSfjeQ1\nPP9BjYq22FiYlT9AP1vCqjvjIMrmVuMATIeKaNECmM3ReavgZ8JJSMfOoUQJ\nh7fn\r\n=XYrr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEirgIE28cUjtNUAh/pCAFGCUt6UvBCwccLcm+DFth5AiBV6iHBE9hoCI8QtRjIOoQr9wKgoFMIrfm7SOy9zKKkJw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.4_1541482859039_0.9933176980490752"},"_hasShrinkwrap":false},"4.1.0-alpha.1":{"name":"@storybook/addon-info","version":"4.1.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.1","@storybook/client-logger":"4.1.0-alpha.1","@storybook/components":"4.1.0-alpha.1","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"253a667e68bac7dee4d97a6bcca020b7d05617e6","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.1","dist":{"shasum":"4f7afd40e65c992767da9f09a9b6f9902d0f8539","integrity":"sha512-il8vAIZuxLxOaQStvAczo/hUDcdgDDRSzx4kxcxmb1NajImoBSn/L1zIPgTPJHPFhqv7C+t/tRWHE7GiS+6ajA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.1.tgz","fileCount":64,"unpackedSize":552682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4Vx3CRA9TVsSAnZWagAApD4P/i/KgFqDbXr/VWUkmuWb\nAXlLzQW/38O6oKH4W0SygkS7BZ47q27dz7U7nKSE13g7njhnf1D3mSWVsIYr\nrcERhbENdM0jyanQDNWZL6JRagPVJyvml04Qxy/Dzmr/ID2E9XlPSGMkI8AW\nPEFvwZuVNxLlQPTcSLEJ8NE6IZzZ77VVng93C+WuQ7AdkKpef1sXBbxwN937\nf3L3npwgFUSWNoaXg1C5W2CKYEJXYq2tP4qc8wyzRXbYUwi+yehc9+ueUWvf\nR5gegUAHh0TGxw8gIeAPvH76euj0sXwrIr+0Ogn+i3wM8ipy/P+5/o764hC1\nLqo2Vf+6vLVoAXt1Zr9hryFy0EENdxXnzO/djJsAJo/m1/YzvBf6yG6MkMd5\nYbhIMu6V00yksYWGJHLzvCrup0u3TluUw/P/OE5veRGsINlHJXdk/vLOOzOq\nhBfMWUPCFPoUbu+THqEabd+MZ4AkzSxRqqQlrv+GcuC2R5GmQBV9fEvKQIzl\noBDQAU8TIj8LOr/qLhUl5WvxG34rwpxjgKphCiFQ89dhMG72W3AZ0f6zWHTx\ni7YU47inmB5ahtifDFf7f9CMlTceTK5sP2DhneVEK7gmB58iNtXUFS20iZhm\n65grqGMhu+prYbqjTOZdDpHuTtIYGdAoPNkuLkGE7/QTM+wJjZdLNs4/0GKb\nJvNS\r\n=4xhm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdgaQVXBUALw/G7kdweW1W8xJ/9fbKiUP992wu8oRg2AiAt3NGbGkf4Cxi6wi6n+VqL6mxSSIc2XaL3dbfCjz8gOQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.1_1541495926865_0.9545413772593203"},"_hasShrinkwrap":false},"4.0.6":{"name":"@storybook/addon-info","version":"4.0.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.6","@storybook/client-logger":"4.0.6","@storybook/components":"4.0.6","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"5d85f5d13286129f85f3e6d78c105b67fbc35b5d","_id":"@storybook/addon-info@4.0.6","dist":{"shasum":"5f0fa63f60b7eed75145767983a7f229fd86b4f2","integrity":"sha512-ZH/sljuE4Cee90Yy3KmVqs9HBTsNY+M5UpIjIiMrW4jUNZHOAqv1M9RNYGbWonHhG0XS2oDHDQSCBL+DsUdzhg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.6.tgz","fileCount":64,"unpackedSize":552650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6rKJCRA9TVsSAnZWagAArbYP/iQNwsmKAw8PbOBoD+YB\nuWAIvbG3hwMZtrI+czGMIYM83XMqqPitj4AozLtzEGxmiZnVTdimFV2rsNrO\nuibowNiQdnSMugnEh+PC1/sLxEFzsG2ISIR1AMwtkDS5CORrErAA3KYWfn2S\nq/lhb/zEgwYrCj6rOwr5WJWCaR2kPhHg0qTal0Rg9SXSVIcU8ldMrObY0uXg\nxMPlNhvM7K6V4S0EnbawYsD2SI90HM5zj23of5rd58QrAl4BVNiHrQfPNlDJ\nSCsIi6BIegiaaV06kITZobzKFYiVcG615okD1SueWCLqC7t8RnA7mGM5K4sF\nOLITc6Rzj3nV7UJ99LMGhwTq58DXBy5eiJ1muV4kYiAg7dVeaPacj5MA4b55\nL3aB05aP8ebfmnf4qJkcm+wC8t5z+bfjkY0VE0B1w7KoTgC/I1/fc1T1Bf6S\nr47+0zONzgL673Z8by3fyxDE7iCclfPObgMA/OOSDxvpj7T9/QNyrqoNduV3\n5+ER7RJ90/987wEntqfXMqFBA5uGynYrg9it3WPDB5hafHo5OW8ik27UFJ6S\nqLk7Rtx8oaAkZWQF/YIT4VFM4pCpHwCFECgYYRfS4h60y4u+98peSViyfXby\nmaSgWWCfNocwoPXSe+83BgfiQZ3WFXFzc5HeK4M/stxCVwHCDLZx6Jgt5CNI\n+SLy\r\n=48Qc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBofRixQBdunucG/mu6Oc3yCAdtwqYZ3ZzroRIlEh0+IAiAgf0AQikD5BqF2EbWseG/GxPk/mQJMqTNLQuoo04el2Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.6_1542107784498_0.6797377888589087"},"_hasShrinkwrap":false},"4.1.0-alpha.2":{"name":"@storybook/addon-info","version":"4.1.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.2","@storybook/client-logger":"4.1.0-alpha.2","@storybook/components":"4.1.0-alpha.2","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"cdb9e485eb85690368b1f698db9220ca7bc0298e","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.2","dist":{"shasum":"14356896c80cd8e86e29b1ee42e2b468664f71e5","integrity":"sha512-/x+q6huJ4aVnwcdOGiZK+3frvo42NlNVLNL8km7ccunAten5jFbCxXcaLUBdNUwF6bPyQG9c08tY4w6HOJzVKQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.2.tgz","fileCount":64,"unpackedSize":552754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6rdHCRA9TVsSAnZWagAACoYP/2vGUqLdv0GfGd4+WPQr\nj3CJMtY1IsGgd0S/W7Vpc5ay8QPcO8+pX9GOVLkr9LeRh+y/wzmTyFDyETIt\nG+fKsgQ6FCxlvL3nq9MVDt8Y3pX/uRSK7+jjfeEycKFYtwKv+rRBzP6EqrzH\na/2dgC0iza7Wpw9tunelYW/qM9O9riPcoZMu3z2VR1435ql0pdx7hDetihZP\n/drBCX9mODKUa/HTBBtZNxwZCeopdcyiD+5WJOvjX/tCT9mS/xiDt+Y1OG5+\nDuKvmiSQF2sbQFxYiOjLUjMUzXZEjfsub8sF4j1HsxiIYpMQAzxQC1OCm8PW\nsQgzJHyTyOBTRfzdLWIpQeR0y9v74z3mvL7RdP06DXgkYyEcfmELwKD3yV8W\nS2cQ6ZZzL9c+yy7r5YVrHGYQKN4G8KhaFwYdO/RGvt21VSxaV+mwGboOLZtY\nxW8kuIBm1Oqd1WraytkHNhKoGkauNxP7tNtxqcJ4zMPx3lJDI1JLIDEYecaw\n3ZN2ZUBtWGwem38v6+0jpJlr72JR5vcIcnIo24orZlYyJSmJOi9oopzBI/22\nhJLMhJnAWAjly6SL1xCcAE87mNCHv3wVZ82JPzWVAOsG93ycrGne1y9OUtoE\nAU7AbL/UX1TEirrNSJO1RaY4ueWWE0sasLeZo4o8TSOuL2i0YYTHGJQTgd7y\nPvYS\r\n=Ki/E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4FHzBtJsqEVfom8hHFgC+hdPoBqspJZnmCXAh+6+IlwIgJPWwpSOx4P7DwZrB1JHGkv7ongeXIBVGFzZOy/FJEJo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.2_1542108998567_0.6991642630740862"},"_hasShrinkwrap":false},"4.0.7":{"name":"@storybook/addon-info","version":"4.0.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.7","@storybook/client-logger":"4.0.7","@storybook/components":"4.0.7","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"5d5dfe011db3b65ad52e1559333b04e7e07af461","_id":"@storybook/addon-info@4.0.7","dist":{"shasum":"10af6e94795eefabee8d331fcec8a66a22135b6b","integrity":"sha512-3OciEPtkReWcA0cdDd1ZJ2ZQeovRGc7M/jV61pAO3ncAF/iHVnvX5+Zx9pX8c2qB49FOHZm++6DVpuJ3etbfFw==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.7.tgz","fileCount":64,"unpackedSize":552650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7XYECRA9TVsSAnZWagAAV28P/iBJA1CiN8zqBTxMB+UP\nk+EAw+2skrLoKBBDXKVu7N1Nsi0kWx4LrN6wQV0ZDlosnd/64R1dNz17nigj\nAXO9i/+bECG8R706N8TM1VG5O6tuvUYb5+8AZlLHOlzLcUTJXF87ldcMTTNt\ng/3ijS0VawqtpszAU2wz966zaaZA4fwH3Ei6lzHohnmcG82ceGwGgWfLIZeb\nJ245n6WvHkPH1nJZOMWfsSYjdYNuWTUfHGyIgCs9f1wr3NUFNiTcl4KxND1l\nRAILPmw/uhVsHMOkP2yn6ouS3ICjDT8Y4x9e8/KBSH/co1QG7QrPowU2XDQE\n3tIyVb4bxnf9zz7BDfLvoo21iJ3M6KmQmjtw+3JnAYTjNFp769p1XDU8EXRd\nweKi6IyhbmHdi09tU0htBbh/Ja0KAoUQMj0mBZvOOpE/+Ftkdh+VXeBTMCFP\nSn7F85FvMjLQv9RqEXo0fp1+2MW5NB7HbvKOWVuV524PpE/HMZgD2FvQxNMr\n3Uim3LRbNh2ujExt8NycdZTsESy7zltEOMIs6IWcKH+DJYNWzEJb9g3ii4Qs\nZZVLztVJDZZnJLXkW/xyLL4fu4SpSrZ+vAHAhm1R7IoMKUYbRYaOFPiDxdhd\nlsys4PRbW5arWWdCYCj7YCvv/VYaieKod66p2yOnrSKsgEqhLZh1PI/WCgQb\n2Wmi\r\n=90Z9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAm0d0tskczuA35Zd3Y0cm7bVR+0gFdfaw0G2xgA/AYXAiEA/DonsUCfDiaVRrEBCJSm0iqZvgsd2uevELgrKcls724="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.7_1542288899949_0.02783961203415375"},"_hasShrinkwrap":false},"4.1.0-alpha.3":{"name":"@storybook/addon-info","version":"4.1.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.3","@storybook/client-logger":"4.1.0-alpha.3","@storybook/components":"4.1.0-alpha.3","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"ddecb0b7f6a9e976a32ac4a24c2876d8ff3d6d61","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.3","dist":{"shasum":"35e9db9fddf965e774602981ba708fc1c1ba7967","integrity":"sha512-Jn2pnbJTqezRgS4Q++pG2b3Okl2lXhmA9Vyda+xWzyBJ5jiu+K2AL6LQn6ClrzyiGXZOBL3Ev61rpB8qjJsomw==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.3.tgz","fileCount":64,"unpackedSize":552754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7X9PCRA9TVsSAnZWagAAQlMP/3pSro9NF8ClqhyB933o\nwbdisdnqozfTuCf4kvYebJb6qmEaxwTxV4J6yOUNL7RZZ7yBaPleAQeHl9Wh\nuGzcgzraTMUGdpL61AJTBS8r4/lHfI/iSVVE6JiG3n4qNEIJp7eTFiE/2aIo\n+gPC81UZpqlpi7kaQ1fzitcOjL75551s0QQOT9pkniAvK+OvvRFfOENOgPuw\nGe6U2C+sGZZrDX+nftUbIKk8hgyfXvVvKIAJU2+e0C+mMn3F/TymExIi8mPG\nINenUaeaLs4SB4/w2egERnWdkEzWma+ic4RCo39CYu0xtDFP5jNN3m9xF4NW\ncGLh6epUrALpa+tdQhNLlIk0dT+O7/Jyult/X7yGO2vUea6PgEHCbt0wAETt\n6liVWNUdDwUqoLfFAbjej1D6YKk+GbYxIwDduXSLNKuQey1hDoGYk+7HsAt0\ndjQ6l0Mq4AbcDdVS5bljNuT050h6gXkfcSyV0mgHdOaPCHFfOmTY7WJNWg9Z\nrn3VnfOJE/Ij0TVv24gwpPuhcxexc3idEpBtR0bWOf5F7ylwic7qJIv7ECjy\nGUzBI03YSB6HG5xv0+2pINdz9Bqxmy/XlG+wt7WXDRRJfZDeY6uhmWNORlwS\nE3GlQqVDVIFINZgk0kCGZCl1CeizrtK43sham7ZxZ3Uj4+FxhZi6jLPD8mJs\nIfHg\r\n=G9bi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAdFHiI4xDjI9e4BhYLz3K5mONQYLYlUa4WCzKZZuh4AiBo7EqfLLi5Y9uw8oy18fnGd8v8V9uPckRjPUmNn/lpSA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.3_1542291278463_0.4110256308274105"},"_hasShrinkwrap":false},"4.0.8":{"name":"@storybook/addon-info","version":"4.0.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.8","@storybook/client-logger":"4.0.8","@storybook/components":"4.0.8","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"960bd59b7d7fe3f63bc291edf55f7874e2c10a31","_id":"@storybook/addon-info@4.0.8","dist":{"shasum":"463105d7bb47c2074505330fe72c07537ab20d2a","integrity":"sha512-8JBaxXougDLk916syq+03xoii8S6nsaKkDQ8Tw++L9nPhpKatHXuSJod1FzEE4rznbuQv5GmVv4PABUzEa+4pQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.8.tgz","fileCount":64,"unpackedSize":552650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9S2vCRA9TVsSAnZWagAAJ0wQAJ3vwqgE2Y7iEyA3lPtL\npaGMbpGMajjy87HZ7fUPX2p3kLGh84+DLeGF6qAc9UQD1yNZBdtwxN6usB+4\nEaRCbjatv4O1kEwVNU19nTqUkwu4ScoGXSgxk7Mou2HE749blGcffWc/Xmj/\ngqPMwVHttHmLQa6TsbqIwLT4SCxxePnJ+vAYWs2adczFshF8kEAO0r+Q51tR\noBSfTJFznRo/sD1nXIQIAbkKdL9QuGm5e/7rAExLD5GLQ4jVd7FutbRoiBxV\ngzQthGvaJ9Pyq0urmYmYYMgMLScbvIdlntGXZLYbgxPlrIOJG2jlhSpociLS\nDElYw7t+LuF7jYBeQ0UOavHdnvr4CBvDfblzajmLcx4+wUHmoq2IEXsH6fCW\nF1fBqv0E2aRV6SAI2s2wwmv1I7mnjG8FyRcoC+O3oTUpC8CIuP6IffD1Wm8C\nSk7OzQ0yOEDIrW3PLZ70A5Gu45dNpjrIdQ8ul19E4JMeVAFcr+liZO0XBrGp\n0q4cCMFka4e/XTo2fJQfKg4lLMVbOS7KiFyzwhogiJnVLigiQpD57H15mTkg\nIgWPOemxE8Wzjb8wftcX3lZNR4Z4sA2WQ1/jZPgIWWbQL636sWOJ3Drky+5X\nJ8rjXGoFkngKvD2D1KuklIpW+AMiRI0hiCekLfbDHNd/ylqVBEdjNq6OPvuv\nB7M3\r\n=YV07\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxlAXLkQ4bvpa2UMHS39VBcd/i5Ee3pAlhomgG56tWeAiEA3NsrJ/Onctrt7vTKstVEY2u0d7TuMZ+ftszKmeA9OjE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.8_1542794671118_0.7190364297470502"},"_hasShrinkwrap":false},"4.1.0-alpha.4":{"name":"@storybook/addon-info","version":"4.1.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.4","@storybook/client-logger":"4.1.0-alpha.4","@storybook/components":"4.1.0-alpha.4","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"d8dbfcdbb5c7a7bcfc4865559dca8fa45e057ab4","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.4","dist":{"shasum":"94e619c07d72e488dc55b742405003e1320ed0ab","integrity":"sha512-Wp4tHRyblbNigcA0Etx6Y8tsEy56tCzhOopfZ8vxgOjODpNcUKavIRDzSw14wWXLMNNp4k0sTy4N9PqTPKV6/Q==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.4.tgz","fileCount":64,"unpackedSize":552754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9Td9CRA9TVsSAnZWagAA0ZMP/idOXa0phu61LP35clnx\n9fcbYWT3S/EwPJvh8NkY7SVhkPbJqvkd/ev4Kck0o3PNt1FKy+j4n6GD70/c\nR8RMDRPkvoi/JxGLg0RSLNvHc0Fh0fkvheaCXSByXX0qZiX88ki9OBs5lfKs\nSG0OPrw4G7e7dVfD6Bw/G6iYLKJ4TZkbLfVIuseugbz12LZQwSUcUVDqJ2pD\nXic+abR5m9F/2tdJ2Lh2hmcYhUzmXHIdg3+io2VMau2y6CTRXvpMX/jC+734\nzr/LnG7oYFLKvcvKX6N87ydEh3TXKxuvxE883p7GodjBd2zmvcyLHJ4w5Cae\n1SFV4teYUWW9GeHJDGYmk21WVCZT12pkpJnBssy7fGTL6sikTS/ulG5VEIWJ\n/JDjqRVzCGqhmf648rUPRTGaWLWFofy/0XBWDUAePuE9/RCRkGhh69MQW9DI\n/mCsJ+PeCX8e8CJHD53C4SPqwYp1pnZwhbG6pC1NYUuuXc16QjklLILJloHW\nF7rZ3L6IKnKIn3sEXBli+Z5DH1MZ1DzvIQYr7/E/QhVNc+cGTOMmcoL+E3Ts\nHxPvh+WC4bIbjzFJWrZOqsNS0IKvutVkJmCSjYbNfCNRTwQB70dZX1KhZFD4\nVnFO2TbJF+8naYB/Qq322G2Hj/MeoCO5mDUeDC/p2YUt792CVgesZ7P/OtNC\ny0/F\r\n=zw1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtrdO2wnHSFdQiv3no+wqH5zDyKfdbXXrC3qrVbJsKyAiAscMpgyB/cCxJeMQKGtC8ZqBwGnS7h1wS2I9MORS6SmA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.4_1542797180438_0.826076710350873"},"_hasShrinkwrap":false},"4.1.0-alpha.5":{"name":"@storybook/addon-info","version":"4.1.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.5","@storybook/client-logger":"4.1.0-alpha.5","@storybook/components":"4.1.0-alpha.5","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"337eac8671835325fb003d8d3cc0a1cc6dec9bf6","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.5","dist":{"shasum":"24749f5f611b4ecb37f9fe36d24bd7ea9aa7f614","integrity":"sha512-snrHf8loO1ZU5ailt5Ul1BPgQXCmQgedGikb8nWX6r7Afjx0uV7w1M99xpXFiDiFq8Gdyz3zQGS5cnxuGxTDZA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.5.tgz","fileCount":64,"unpackedSize":552754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9ilXCRA9TVsSAnZWagAAtdMP/2fbqWk4x1vWdGwzRnt9\nHA0ky4SY9EX4ObkPjx7iVmJaEelep6pG/ysJxSPFpTnULolc/r3eA3cHgHPw\nHkuhQSApPtwkKajIU1P7FrlGlldTDde3L/WWraiHRdYKEdN0xKMep3YZLAQT\nmoGw+fKshDqo0Vxi0/OOX2Tr17XWXra6ygBIzGSt7aOg2HpUfNcFTeVbiiaI\ncj0MqeRuyqn8aMiaDMMQg5SzbrqV5VDfWbVmnfHS1svURniWsIGhCKc7speZ\nVhPxgKV60gH5e72ctiKkszJKUWUTPO4WFywCwUxd7a5ANb6ck6vZX2PZu0Gr\nBh46JQm69rgFl9eN03ro6J91hVwCQtcf84RKFG1BV8un72liVdTBQarMKSdT\nj01Au1LMJtDXvKxLF679sG6TkcKvcmrqJATi+LsKKNnU2N4tiqyGwFYHYU94\nxz8WbW8BtY0cVRyHrpryM5cOrubBSjWAJgvcFHWVxY/k19gw40TVp81tgM20\n6AEJu3O9OJ1Bx7Cr7u0SXw048u/WCeOo0a9wkpE1A7xBiNibblrm6q103VB9\nQWA16sznZfz81+oZQ2ToPfETVkGthpN68UlbSuj8O5twx1D9s3QJBzIIWa04\nzC5cIr3JwquhaSFIVxvIABouY/QU4Ykge3iUwOX5d8nhDGGwFcHN11dLXjSA\nFnjP\r\n=ZKmM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHh9rAUmWSVoxZMcUAqmU8con2qdwkriHmk/jX9PHybIAiEA3yTCs8S0nAn6McIJ3bszTXQT08hOP8ihDBQBOYRzi0Y="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.5_1542859095061_0.28791790840484666"},"_hasShrinkwrap":false},"4.1.0-alpha.6":{"name":"@storybook/addon-info","version":"4.1.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.6","@storybook/client-logger":"4.1.0-alpha.6","@storybook/components":"4.1.0-alpha.6","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"8a9c0db4fdda75eb1f9d649793f9cb397c9ff788","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.6","dist":{"shasum":"2988341dc9e553c8401f56911174f213b1bd876d","integrity":"sha512-SYCf6CVSSwhx2r5UNDScLQg0YW3QqxTSum6mtDAvvALHgb8IXxHaE+xMZKuGUvwNTMYembEoSusH3wK5RO/STA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.6.tgz","fileCount":64,"unpackedSize":552754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9iwBCRA9TVsSAnZWagAAMn4QAJNSTLZg9khdsmY7LDcr\nca3KpbuA/veYD8QnVQJVjRW0qockkXmQRCjuNlkIUguEaO9Amul9Z6tXeoUW\nrqUtt1bnlUaVyYS4bAfRk35d9pQQ1Y6Pq8jqfnLJuMME5nGTp3a3omf0A19e\nAm0GHfF/5agAZgd/rk28fUtNstAVFyVsqck078rIWNUoLa2VEiqyttwP/Ku1\nP1m6L/yTImKYAdUsT2aHcuv5pMZzFs6lsSKCM/7Oth8zjjuQCif4escT6fMU\nHo6613t56377VntWNTVmmqhNXMr402nAStEknahgfdQLZ62WLKa2GqH25h3O\nmbj+yziBoh6G1h8lcjCx/kqF4X/HdtbuW0x8J8dInNI4BvMjJ1ctL20YXU//\nY/5m7wMjs88UZzXP3yJjled86VFVNeiDlw9Gd/Jg/3ixNjv/XJwro5Lf6aMV\n7cLZQX01npHJBsPj0UMx/vG52UOLa4kUqTk+cbfwrrlpMoMPAINAhnqvAB0J\nLh8yQlkVit48N95V/9RxF893YYCDtGdgjYO+I3a0mlftWW9tA1xJyQONmbq1\n894ubcMyl9hrDTCrYBmekKNSM5m8++cu7fbdokZLqx+d82lA+v9INoDQcAkZ\n9txLUXmdNMw+8rbJmpRfNNtEH1e2m1HhTOPFlwsfqgIH9+63ifdu/6MYRV+x\nVTj8\r\n=Jrn1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4JNdhZie5T6aZWRJydOyTOuKKmzgS/oVBbrZdThObNQIhALkEMVS0lBDvPzPO9QHBdJEm2hjC5xulglEa6ZRPDxYD"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.6_1542859776449_0.19091393540911383"},"_hasShrinkwrap":false},"4.1.0-alpha.7":{"name":"@storybook/addon-info","version":"4.1.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.7","@storybook/client-logger":"4.1.0-alpha.7","@storybook/components":"4.1.0-alpha.7","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"d507e2edaac929bf57aff9e62ea94d4f964ddfce","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.7","dist":{"shasum":"377988cd7ec1a27f6fae0bf442ee236e7bc426c8","integrity":"sha512-+uTkqGg0Jvxu/xVXUTcx3cDiwUMTZwYG4+I8vEVkz0EwtcXVZmaTXlHU9l1w4RVGRi92uc3ZywEA+V2VjKGsJQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.7.tgz","fileCount":64,"unpackedSize":552754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9jJWCRA9TVsSAnZWagAAazUP/2C5Oe23Mp4St36yMpb5\nSpebko1FjtaXmGDUNmiWfBwsJvdAD/vUsbPTU5PRwjOHzrzgEfvYGP3BbiMP\ndmGiGmcRQ2ZVj59CUdDKqJbMFYRTbOBGQ3zf+ElLWY3P8O/zOZo7CGhZ03B9\nJyF+R3kb3cjg8/iJg0kuhvwY8t46Hpt9Lx3C8GZNGTNZAiGG9pIu67w+7Lw2\nHcTZdGSH26+9MNqUWGAv3ZxsR3zA88+cVQWJ7YTlwDwXBReKLmscf+0KwYTS\nOmNnvI9YWPkZHQ0j9sXDV7RxPugr+UyVSzFQ79KAvuqVJZUeUgZL8HcAh9mj\nvUqy9G75ppWSOZvPQqLJaPnqEP3g2cpJlc76AKQe1FsJX4pChVeLweCOcuVf\nr+NefJksr/cYaIzjJjVjMOZPEENh4PUUZBpoX4kYZ1+ZH+vbWeF+hvCGmtyr\nXAkNrDkKi6UTrLaYRBfvUNjjMmmaV/yF8hzVac3SR/mn351yAm1upGpXgD5j\nmu2TTjx+tYw9f3OwLlTx9ed3NTTVTDKo2QzBucCE7qBAVYBTpbvd734S+6jr\n6Vbq+U3XWsBAsDGpfM2k+39waJOHwYHwk/YFMiKBQhKFi+wKcCXe1MPougcN\nA6X6SNXB1eCTanf8e32oPGBJ/iqp88/AWKp42AuiBWSvbC6EXn9AkmjamGRh\na8rf\r\n=hHbb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPFDl7xFR/OhGR1pv5mpUIvN5N30hi8Vn+NMfdnmyGbAiEAm16ecJBvgkUaR5xGGoMFGJOXPRrDfXLJc/MKyCZ0BTs="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.7_1542861397394_0.8517722493808266"},"_hasShrinkwrap":false},"4.1.0-alpha.8":{"name":"@storybook/addon-info","version":"4.1.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.8","@storybook/client-logger":"4.1.0-alpha.8","@storybook/components":"4.1.0-alpha.8","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"0833a4b8a97c8f95f484131b552c14a55194bdbf","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.8","dist":{"shasum":"99309eb61013817da8689574ffa16dc4e25206aa","integrity":"sha512-Y4v20IlXCsVQ8VyaPg74XqNjzau5JhdlTwJurynKkdnkefKBH3zfOlVs3x4VymI+Bq6lRDvCRwV+KaLdQMVjlA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.8.tgz","fileCount":64,"unpackedSize":552749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+gMUCRA9TVsSAnZWagAAWvsP/1H3jsCpNFMc1bidqC1n\nkm1UbDP/eM63MePzWWRoK4SdKC0CVNJv4EqoecRQbwnVVdbb99fDaB930DAe\nVJmz66hMmh1mGl2vhCJLIKRLmcTA+bqMXYqRI35JUAOv0+GakBQ4lS1tiIBy\nuZINdE4Z6o4NOoeqquQd8Aq7bbRr82Uz4WNV0F183HKqoOS6BYhkyBaIpa4A\nJobAfZCX2VPrzej/A+sckdnEh/zxJTkKtZrhoWlSmtRb+Roj3OM68TZfeLln\nsGtFmc+zoaCk+3gmXAEEmB40n7kjnjFBBSvgYzIJoFIP4BuW6cBRnOThgpQY\nLd71WoL74Z178OCQCse9IOTClWcg/ok0JJq3m/TbTt9v111L9uxhEhNb5r2I\nUCLpD2g8AW1XerT0CQHM407Dy8574duAPLDeUCxNytOjDufm+mmt3fwwoatl\nY1xwT2r+Jx2VgBvduVG80BpPqtUp3V65NJXe0TKPFaqP7Z2bSu6CLgIkQiBy\nSSNp4j1UfAvlWCNFBv40oUNve/JMQi6uYKLl3e0MAz4XHjPxJDSj8lyS2ESK\nEcRM579XbcwwpPZq244gUfiqOe44G3ahP8QJpKtJijqVNpGRxvt1/AkqqDe2\nC74uOpw+BCDxNULL3wsVZeS9XN1JYB/4XjaqT9WbsxlGJLqNmoMawgTBgC8V\nH8ZF\r\n=+UeJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCZMxkocEk1J9i6pOJRXwAf4DaXh9p5ri3XZCM6GRUpAiEAnqxIICjcSxOTK9Y3u5UPPphg1QAUqiRkM8X2pfAzn0o="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.8_1543111443226_0.22962582181607005"},"_hasShrinkwrap":false},"4.0.9":{"name":"@storybook/addon-info","version":"4.0.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.9","@storybook/client-logger":"4.0.8","@storybook/components":"4.0.9","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"378688ef2aaf78e29b2824853bb29235901f5be6","_id":"@storybook/addon-info@4.0.9","dist":{"shasum":"4ca3cd32e30e7959bef2bc07dc00a5a9041395d3","integrity":"sha512-fhenKMloeKbMVg1J6/FOU7fOrxwLUjnuTfO/6dI9pZkmjV8CD2w2x4ZxMQM3ilA3xharuZwYgF5lGfx2O5ZC7Q==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.9.tgz","fileCount":64,"unpackedSize":664268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+sBTCRA9TVsSAnZWagAACcMP/iTsGocE8C1/9ZLBgJtv\nluOb2acW4F2P0lY5LQxxZC0ZkZwxL9ZZYUSsUDEmu7I4itVx+RVOkCAN0y7y\nfItMRLr3h6LFd/WWTOn/v1nNmNtoR2iQ63aF1LvybTswbvM3FQ9dazwCnOE6\npKGk6Ywr5GfYo7T4TKBf5EdaSJK6v3Gm8HC+EYpsC36o/PZktz8y5p/rRYbq\nU/hjmxrqXBiYvfy7xMAXdH0QrolqlSd2Nclkc1aKjUQgwOBVzS9BOE+uxsSl\nfs8lU8s71TyfjcaYIr+6WL3H4zt6RomOPyOUb0F+o0E1DDrT4r8VTI/OIhM8\n+eFfAsQBVZgioXWQWWTCjRLfvaRu65ndtSLfbq28agMrPehIiQWgOBRZWynS\nki/e+9gYutIj1KcX2GEwMRbqLOzHptipaCR5xIiBz0mSZXosD5ZlDO46Qs1V\nmdqDyj1OGR8l1YThCOTz5e2BmGP8zuiZZDRrNFFwh5MA7nT8/gdGrplTxuXd\naSMkP7LstrQach+Du44w648kBfZKI5/RSR3hZOs8T2XpJByzXGRenbMBGQdu\nvPZdCHXQSI5SCaxNSd3ZKkmrdhOhjuCqNaL1OuvVGUsSjp1TT+kGYGzWnyOV\nW+YkIR5ACqLXSYZWP2IJZ3OK56tq93w4l2PATWVDznfBQa0sqFs3B7Ecrw5V\nQStQ\r\n=FntJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAc7PKf2Xvxan/xQjviijLYqo1S5GN6W/3nlpMiNUadkAiEAj2ASFxsB0l2iUqVyXUrcRMkDVe+h7SlW+QhnfW+cbbU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.9_1543159890792_0.2212606332765339"},"_hasShrinkwrap":false},"4.1.0-alpha.9":{"name":"@storybook/addon-info","version":"4.1.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.9","@storybook/client-logger":"4.1.0-alpha.9","@storybook/components":"4.1.0-alpha.9","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"6b224a2cc63e72f684610dad84cf898518d2666a","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.9","dist":{"shasum":"e0bf00a6116048d47a0f60c1c4729714f79c8c95","integrity":"sha512-BFT4IOt03BeFq1s2+dbtEhLGp89IRHsVcpFHl3VVswmltXJ7z2bxv6q25RQLXUlZ08mAQ2RY2bQKiJ5pX33J7A==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.9.tgz","fileCount":64,"unpackedSize":664415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/7bACRA9TVsSAnZWagAAKMMP/0Lwjty2Dk2nKzHYz+SZ\nMT2W3+wMmUwZz0fjIC521gi8b8B1UTckOxPqvTafrXPYEaQIZWC+5aZfnbt/\nVYvc9wreh2xArMGuef05iH2ngUbiFP+VNi9ExlASFVU8hbRBlXLHBFeLQLW9\ndnPByAOKI/9zhcCK3aUe/6Y35/aU0mvn4pgUOZZ63rMRrgWIdpluDwahue++\nbXkLFBLmCxKaOQlQuEPqHSv+Z72ECw6W1zHmo7fl8192KgeFrMfUGVbQHrL5\n69bqHvXy61f3mFhAcFtAgt0dfxVlpWZFiV+HMvLZbc1tau9xquCIviqV0NK1\nRyW2bplXG2csqO+eWxxBWdYN3xg06Vse0JmqyNzquUpWyWBehW7pMYgQX4+v\nflFW1z0k6j7Z2OK7FAfj7jZMop+zfkxFxBOtik/JzAWHgJCSP6d8Lltuu/r9\nWEcN6f/JGhD3adue/N1zNXmRYfgGNWQGqd8+znekt0TbfVRfqK+Hd4PkKcuA\ngefKn+QyBm0QCS8ekjifflGZPqh1wEJftU8pxJF77wtw1oDHKfyR8KpGMCM7\nHAeToMmVNJnbD3QqFRB3beD/qDE+EyCHC31Cz7jgZE6cucnJISVz5bddVHyJ\nddMcR7OOz/EayF9/jVkyaSqoEpgiTs0KkPtJi6a0XLnh0gJukQu+WdPpHY1h\nu1k7\r\n=U03a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzlsPD+iZJOx28BuJ533A9IDeTgYBdE+7bjpsjuBpLDAIhAMvV4mdatJjOsgAD7uFsvyZ/FVn97aM5Bzi/MTmbByDr"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"christianalfoni@gmail.com","name":"christianalfoni"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.9_1543485119631_0.7486368580334113"},"_hasShrinkwrap":false},"4.1.0-alpha.10":{"name":"@storybook/addon-info","version":"4.1.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.10","@storybook/client-logger":"4.1.0-alpha.10","@storybook/components":"4.1.0-alpha.10","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"3cd3ae347e7bc1edbf70fcc8dfb4959430dc9bed","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.10","dist":{"shasum":"8d2c4369145d96f5b1b864f3ee76f78e94a03767","integrity":"sha512-2NNdAk95sc4lpIX1glQvGeIyonp+BqwoEdMKXQC/cpVxjkaKeXmY+e/93nHHZRschJVva9lHDUIzYHrNZJGEFA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.10.tgz","fileCount":64,"unpackedSize":664419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAf+iCRA9TVsSAnZWagAA7sAP+wSHH70yHjHGyJVxIZeY\nMreQnc/IZi1aqg/x7gA4S2J4rqldSczBZWQ6jo1Fn+wAbaWfBu6rXQh1tPTu\ndk0tuMO0J1h6xrn30QACbryL6LkZzjb6DUx8UXUa0snLzifp7QRQNbaSjKFj\no+b7R6fJF7NYmgOLhsBlQt5KZGCI+7P2dOoEV2oLEB+dJSjPUt0LyX4sf85B\n/VqRmefrfXQ7V4xW6ZzrFgDGVZuANp6wvrMWn6WUgLq7TcoetO7r2wCqrezQ\n6eydMUMvsXHupsFNIBeer7qJY95k2z8vxLMYK7hyB88ZgukvUtI7EN2iN2bl\nYCkLq4RJwIJy1nOGYpEcmTcPtNikwaUcYVMaVwx3UaZlTT7j8h+LRzkclGKo\n3ZVjXttOdfk4krrvBjSloMhAxYHiZdBRJ03XZ55+giNDAuaw4qck9biDC7lN\nPB4AqhADQcMXfZduzLDXpxDr91zdwmnJrd2bg8U5/uFmVwgVm5K18NDnYV7O\ndnfnTgdQlmz+u3pDaB4S3bglLP/Prv11DWrxPtD2btphEGVMQ3CKbEmLBHPz\na5CH6gJWXAI79G0gWX/sMwMK0jAHOxEl0rndmJ2c3Q7ocyDxJSqTQwzLov8p\nG/HPPna8QD51s37KtMmlHwRjEyCT3mZjKo7tofoUdLFBMNO9/VO/BxINVpEQ\nTvf/\r\n=qpGk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxxw+ozbGW0ExuLMYMCHwPu9+sQcPravoq4s8S0xP5sAiBGVrAJO+e7R1+mPhSCGPoRkHBjg8XP+1hhcnjLvarOxQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.10_1543634849081_0.8931017064353717"},"_hasShrinkwrap":false},"4.0.10":{"name":"@storybook/addon-info","version":"4.0.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.10","@storybook/client-logger":"4.0.10","@storybook/components":"4.0.10","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"c6de6497c36e2a3fdc5c5514a1648ee2462a080e","_id":"@storybook/addon-info@4.0.10","dist":{"shasum":"060d77ba5f7f9b929f74c9b93aee694c7ae198e0","integrity":"sha512-UzeekCFNkQqtg6Wq/3VRe2uyfMQMkwKhvMIQ6+BMStSGh5ZWWmTZ12Y8In76dd6VEu/TmUCb5R6DnaVJcNByBA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.10.tgz","fileCount":64,"unpackedSize":664272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAxA/CRA9TVsSAnZWagAAvusP/3xDmM0PA8IFHFmPZ5Y5\nKBZveggjrqiKoa1DRGFTOfZfc17jI2460OOICbLpwaHHtyOedfQlDZjfmUbG\nqcVgecGzABfZ8E0W1wvJRKfZ1zrXLzfTkHAA9lWPxKpO/Usn5F11kU7fzwMI\nQ+eHaETuSvw48F0hljdgZq0Ybxc+vxcu82k+vDSXwA7SWsW37/34fwkzQteo\n8RbFOH6hrJPG+6kgZYu79jm1YaXMe0LBcrxBSET1DzdQaqNB+mCOZfLKrEvw\nB8B3y/UDfGyfzwxln1gZbhRF12xMMH99WX4vu8bX679z8Ncic1v2qoSjloLY\nbh54gvT0sMLhkFLZ0260oLPelT7mW9REvcnixm643y0fLIDQcI8Krp5SnFgZ\no1o/Fzn3jnM1eU4KZaBRvpBTr+wu4kn+nVfbsSzCJQ+jCm6MH8tEabxOWCC7\nD3gqMl3AqAihh11sh7qo6AKjhu4MldAl4e8Q3YZ7Z3JSgDWvCSAVaXPbw+CJ\nc9t+5fFkPNzk2h070lGYXJNEmEfVN46ccwtOJZevlPkQ96L96fgIlUQuPR/h\nKhJTOF45B8D+rG7ZcO4gH77YksPo94I7/j2NZqqN8eKj4vvqw3q55OC26JuO\nLKz5FdRLVa8MYm0lc5bxedCNZgmusdO0+IJB0CFbVbXUuFhsm8XIAj3ucdjp\nrv+q\r\n=0fWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhPPLSPVKI2XEdfKxDy2jYbwh0w30IH5t1dHvSwpg/OAiAAkxAJiOLwy00lxt8xAHr0Mibs3KMH1RFCQqeupb33+Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.10_1543704638960_0.029130578143301333"},"_hasShrinkwrap":false},"4.0.11":{"name":"@storybook/addon-info","version":"4.0.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.11","@storybook/client-logger":"4.0.11","@storybook/components":"4.0.11","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"99598473bc98f9516cbf855929b54769607fd7e9","_id":"@storybook/addon-info@4.0.11","dist":{"shasum":"d2312c89651d61456ab4f1a44c50a120fd91119b","integrity":"sha512-8jX5hI8vrjxphddsKsSi/tGQY4Dfb+nlavfSeR1QEaIFUcTngxhbvGLnz4ZVeddIoRDFWeD9ls0zb3jmaDFtbA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.11.tgz","fileCount":64,"unpackedSize":664272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBJmhCRA9TVsSAnZWagAANhkP/3IdIyyiq8QxYja4fWaB\nJaaQYfF9lcr/IH7Qyxk8QjPgnQFTk2IMPrUcISygQDyITQOZArA7vIAg+pLz\n0kH6onsG6wXGo+fwEiaaCVp1fSrzUNcXVYSZrNiLVZe5wrSMpM8MgcXN6BBe\nqq1Tqwe8yYv7bkY/+kmNuoH2Xo1OFwhWj0Lmy5cu+MQz9EyIDstDLnpOqLrb\n2/MXoa0scVHbngH+uuPR/wfR6/rrDttt4i7Iv0mjg7I9IAbivyIskc0LyrmT\n0NbJyhmaNZGC0sk+LjXZR9kbYdMjCb9C/whiucLZNXTfKygOmT3UKEGQYKk5\nXnPmN74NEySbcQvw5b00wiMzfEaa+usuCrr1MnlC8jIYhqRRvRAE3qOH41K7\nwb7mBHArDzy5loPZebZJiZAaJda/yDDinquPUoVyhbUjHAzfFC0U3lGc+VGk\nj8peTf0gs8KzpkRN6gG6DrD4oRtjKeEuKRIM/RnI2KfMJegIJ7dYsRRrZ5jk\nzsytbwMlfSXAJW0s0Ep9T7OyknIWbahXUDpLTVCrnGn88A7TezQoGcG/u7rC\ncglBpblt8CfSGK00smYqlZkVzlAWbtcmPxRO5EtSAPnq7is2X5pL54zeVS+7\nw/m6E4MMH2BosdSZ3vQwkZNmIOi5ksL7Dz0rRFMLX1K0YXFM6m13h+SfAGDd\nt8UI\r\n=hHRN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpEhyDAyPq9pnHRjF/4IubHFRDzRKODdu5AX76CTzI8wIgWekFIkPuh2XNHgM3nf1lPNJv8bzp/ve2u32gzZzaBkM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.11_1543805345209_0.8559204215024687"},"_hasShrinkwrap":false},"4.1.0-alpha.11":{"name":"@storybook/addon-info","version":"4.1.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.11","@storybook/client-logger":"4.1.0-alpha.11","@storybook/components":"4.1.0-alpha.11","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1e9e66bd9d89584aa39470e20e49d176962ef082","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.11","dist":{"shasum":"7ee61a824d0b4b8fef086a8973c8a32deecc9748","integrity":"sha512-rHYTieAwLtLkuTXvzCJ6sP3Fbam5DjiBxQjyb56YrdvR5gtX+Op1PxevJdjKuwSQ56hHGj6ueeMPb2uk54G8Yg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.11.tgz","fileCount":64,"unpackedSize":667847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCOaCRA9TVsSAnZWagAApvkQAI1tNG0gzcKHZx8R/7TX\n7et1MeZyhnyMILER8YhZoRjvyJW4ipuhRM9w+20D1E+3jk6bJsHPpJ4e3E9j\nh0VGVcDBCd1JJM3jVSl5UQ9WKci41+xxDqhafUnTjpAJwozeKl5fRrudxJNS\nqacvOE3JGvWcygX+m1HfocIYKQFqeVnrGQKGWcOI8YEGyc5kziq3fgy5Yodo\niv6Huj1A+8maKZsrk2aicaMskenRDpFd1uYWjV6QrhjLfWPpWMbumJF9iFbi\nXSu+9SOP56UfuQhu/Al6/YKxwihHuLWc6WfAe2XOd1l4B/kpwcy2O5mlynfA\ndhYZkut3uG0tsysnGH2N5FbLoj5pusK9qGMbuDEJUUQXYUwaujGdnCpzgO/t\nNsZZH6z1EmC6r6L2B0U5gq1yvQrsaUfAVASnB4nVwDs5MXKOR/4d7yThkQKa\nyX2hJlj+RJulSJWPrHrsTqhVLD0ndbrF3UAlnOT1JG1ELrmHUwqhhEa9z5K0\nSJ9r1jPbM49VZ/S7eTNbaMNO54k3IpHDu25u/DdDS3ItISKwfKwsfDvgMTQE\nOmwhmiKU9Z/f5fMED0UD/zqu2Z9DVVbITZqpy3PdWvnz8HLPIu0gYZge+Fk1\nsnr6eyGaEPSaMm/lgZ1u1cs80rsOAg5HwjqCZ1yELkHGxAcgU1/w5CYNO7Te\n+6ST\r\n=k5jD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpPYqZN5LsJrMtyZ5U59QCa02I3A+8Hql3bUhB3t1t4AiBRy2UA435Op/i5E0RbMXM9FaXJPxxGnfoNuuxNmy72eg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.11_1544037273337_0.8721057895536621"},"_hasShrinkwrap":false},"4.0.12":{"name":"@storybook/addon-info","version":"4.0.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.0.12","@storybook/client-logger":"4.0.12","@storybook/components":"4.0.12","core-js":"2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"gitHead":"d22d1d183e34417b55754330129c1c5902d4cbfc","_id":"@storybook/addon-info@4.0.12","dist":{"shasum":"7d11dd941fa47ba9a0147732ac4dd93d373db2c2","integrity":"sha512-hrF0tzHa5axoJGmuale+CZtBnYrrPAXonByXZ1SY6y2/iRSWug5Af3JaKDorcPZaP1JJ0PK+dJCOKD74mjGXWQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.0.12.tgz","fileCount":64,"unpackedSize":664272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCcvCRA9TVsSAnZWagAAT6kP/0aQakwOpADEFXhpV05t\noWNKI9hMoYgjBk2m6FjeMb8MQrHoAwUJwsWgI4pB1hnbUeCuEeqS4Ot7RGA/\nOzFIcBw+G4+QvVSpTOUAL6OI5jnKbWL1J2BGkBtr1nlpLR8LAq/zsIMuYbpO\nmnOTMn6WC98orV2qVMEQYStdZTA4va3RfWCoq4q9PvM7uEFU64IBoVOv1j9A\nC1W781FTsGfYi0TvJbkZN2bgD58kBpTr7a2/FY7Pz5BPlLPjw69vKf7PlW4T\n0MWC+IyetvAnrxvvhanS8NtG3rnqmAyuc/dlFo3Si2dJGm5QRYtJreW9WX34\nKimIeJO8FzX1Fmkn3zDYIt71dWxjHUHBP3VhBKB3BNVw5QRWl3sW6MFbObR/\nzwJxp4eVdqTy5RLgAO9c9Rwl1yhy+g01WDLEwyrEBWSSQCnxX1L4vDjzMIEg\nzP8Yd+VZ8p3MWpTTSItAsHKN4oa9hmUMgUjzusVFaLbEWH3SAKcqePUvd4P1\n8qidHmQTljycxgdYW0EQwIWDFeJfEgPMZJhQwDMsyX+vCpw8bBhEtUYoQjxf\nh69aFKBUYWljkFS/AMTFZb0IDm9wO1Y3Sl1OA36Z2ruhfuJNdCfHFwOi8zEM\nuMeIQ6jidOv+C1vhuAIhBmpyI/udhrOxdxCbCtquKf7OuxPfpUWmZYYIzeXG\n4OP9\r\n=x+7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxP6MePsIeWfJLuEdFpPm2XM1j3Wc6zhZyQW0G2hDoTAiBiI0UtfrkzKVFcxLEswStMWkvY1ixs78nme2yo2FhHEQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.0.12_1544038190898_0.7193903683496496"},"_hasShrinkwrap":false},"4.1.0-alpha.12":{"name":"@storybook/addon-info","version":"4.1.0-alpha.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.12","@storybook/client-logger":"4.1.0-alpha.12","@storybook/components":"4.1.0-alpha.12","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4ed93b4baf960fb7d614d55dec7981854cc844ac","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.12","dist":{"shasum":"bafe9f061a6c0552f478015c6c7fb3901c1874a6","integrity":"sha512-6R9Ir/86NwwQxDmoU+SA6FWM8zYB0vdi+8iySVv/f0S/xTLu4edvOzAh1PXyWWQt9ng2FksftieK+Ko27slGRg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.12.tgz","fileCount":64,"unpackedSize":683790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcD/SdCRA9TVsSAnZWagAAiVgQAJYASo6JpoaXpfE8o2Zn\nPP5Dbbw6sU+1j+Yr4qLyflphB5SgjYuKN91ECgm9WCDp9f+is3cjk9wo+m8K\n2m7F6VBMFdavUsvp0xmpFucACu1jx4lORW24Lo/bbwHAzSZWgaf7aB72lcYP\n2fpOVrNiwgd9tpUnzlYtUqEG6WGDsOzeJKAKsQDOQi8f88oJeQH5ndt7uD01\nnt+P6ZmxHfMYN0QlX8C8DzvHCHLkZsr0pH994HDX/QCT425s9v4Ka2pQHp/W\nXysEnAd/P2D9VFyR1FvmsDE7tZE4k/Mq8t+NyWzLRjj4SXFZwJFS+j+nyIK8\nWXIjWTOWAjOLrxq98flHITTpvQ6kzy/fq9p0aI+FzlS/05rF7NzM02QxFUTU\n9sb6XZ8IIQOPwKwmGn5989azrxeEf283s1JdYHTm+cD8KUlWnSXBozsLduFr\neJZfclt62DFKOg53qWD2bH0/+RKOyp2owEZAkJSD04wd4jj+xzKthE6flPMq\nTIfaXcQeoZZCP0A5P95uL/zdmrVRdwu+twqCmDbCkKp2zk30O/J/ljNxQkX+\n9DPnQ6aPuciL2yk+PUTJWaTu+OfRP7g4+I6bs+sGU1jojVWPozsZ3E2NNWjY\n/SlRawjyniF1nlfuooqrUmkWrCo8S47E4rtc/dKBtcNs412J0LXvxS8aWH2z\nCPan\r\n=9HoZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDt5JEPEth2PlBmAv6Ff2NyzvOqfDrfjT8winccBIegHAiEAkP6122n7yih6ReeARABKH11VRtENkA0HZEZ+tKxeVHc="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.12_1544549533084_0.04165486254749062"},"_hasShrinkwrap":false},"4.1.0-alpha.13":{"name":"@storybook/addon-info","version":"4.1.0-alpha.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0-alpha.13","@storybook/client-logger":"4.1.0-alpha.13","@storybook/components":"4.1.0-alpha.13","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"de9516f278798d017ba37ec46c28a443343941f5","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decarator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.0-alpha.13","dist":{"shasum":"fd4e243f76df3e2d0f654e11f49808e97909ea9f","integrity":"sha512-pmZMFzg0u830fwUSpz0ayJxIBANSeL+DFiMgDSRkAygFysNqR2lLVMRhfbvI7tizPV265LDQY2OS2bn5xjQSlA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0-alpha.13.tgz","fileCount":64,"unpackedSize":683815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEUm1CRA9TVsSAnZWagAAXMYP/A2nwOyICR15LnKnQExj\ntCwhGHS+aU9zWdQcixd6aN27Dk2giz/IhADyu5ofTqKoMGYO5PQlBxAT20bc\n9gzD/4T3tUQ5u1pVIa4WSIDGEfn5mN2aDYihSR5AHqqykyUY1IF1I6P8x7hu\n0+L67IGf2aqBeDdTg7xlFUXIGFpbTQGMiLpNKOenn7xsfgdBtvpOOnr4u84W\nBpScCklB5Mo+MIs9gNwA/OanBDqC9PDsH4Fm9wHaK+ycjhbIusqB7rV3ek1j\n7b2bPwdY3ptt+6Ca4FZwYVstnddJ1vM8deJR78Nsrjhsv4Z8mgFyTGYPoV2+\nYu8KC4loe+ylVRdNkuAfd8G/yPaP7KYm2+A3V6q25lePjdcRWVuW7QSyPNkS\nH/a6mYYK8zv4SeEGGp1Mp2T8Mp6FMq1N43oaC9lRdTtSDpokYlQjSCesCS/r\nH9vlmgBbs7/OiWdO7PKnmiSbWmflXKXVw3TUiwsMQv8e4e3j9uUzmGxyvTfa\nW458VGRsH231Ix29u86TdKNraCMlGmVfOK3+CLfDs9BF+qbiLskxDm0OynvZ\nTzTg/DSQApu3hwzsGHDcvqAtuUDMMB07mKSb7kuj6fEB73vxw6VYOZFPufOH\ncSTgLrUqeix3tentV8dKevbgeZc7JF9pNTqAG9/Wt7OPceAXqABMdhuszOY+\nWnji\r\n=zWe2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE2PFlXAmiWGvYhepiLJp0Tyj8rivbRq2htf8BJrhX+AAiEAwtE2TvjhBh4RzqHbj2ZRUPqmG9nt9ST9Br3T/vyz9ZE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0-alpha.13_1544636852510_0.6630556005977231"},"_hasShrinkwrap":false},"4.1.0":{"name":"@storybook/addon-info","version":"4.1.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.0","@storybook/client-logger":"4.1.0","@storybook/components":"4.1.0","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"75d45d3d10a182cac209723cba2669512bb436d2","_id":"@storybook/addon-info@4.1.0","dist":{"shasum":"38b42621746c792b20b70287c2706f21e14f170d","integrity":"sha512-ZPs4ebD8pQyAns5XFvKQ/aHiTYapuDSUKFEshqSA+jqnqWg8nBB12xHNNU0jzzcmQ9Hmc46p8rQ87znfP0ED1A==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.0.tgz","fileCount":64,"unpackedSize":683779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEVtdCRA9TVsSAnZWagAABQkP/0AP6EjQXzvkt4CHHBa7\nIkkx3CAMwpV4vla35h8z0pkr42KKQ2XFGXxE5SaV/aGByt1LWM/diiXcaYTi\nDy4t1qcfFPnvmKa8FlvKuQGeVp2kEA3x3Fkyv52Rr3TBhv/UVrNsQOEY5Ywa\nwfVrrZTrPwc7pwwEBIZrH96EKI0eF/ylGYPyvY0zJYCsiQkWuPAMotXkx/KS\nAsarzbCtZjGlnNyQxEfRwuCp2P0WWwbAQvMGk0qAmC9pl+SCDJws1QT94bh+\nhbjwEXGCnrcNSQrPIwuYIl5FxlwUZVYVz4xkYeNItU7WDLYq5EoLsel+JIoc\nBnmZFhNOwwOu/vy8Rik6k19Dp4XHJaWxBwBdCVOCrniGd1aXhqIp5K7A5vFp\ng7cpoTUIHGyVmiyZrpTwzlVUtUHsIGIzpZm9MCORYjWs+9YNxEIpIlPGfOYX\nDIpO5aubvpNMST/n0MqixYpLKuWA3dMqSBblbJgUBRaiF0EjYRDDkXPdXyND\nHf84BTJsVMLggMhWQY6yAKYqSmscFQf8EUzrsMuJH1b4yP6x6B4kcHdsGDZs\na5S8YcIay0SyUCP2DMMwqZ8o0Jof/Rs7x3Pzp6b6TOWtIty8WQSqOGo6vGWS\nHLLn5ls1kjLMEAxD6/a1pBlFQzH8KZlOxq0b03iNNFgHGcLWBf7ddJsJUnXG\nqMpV\r\n=g0ZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbY7ObjStjg9TtyVplgznyQxFyq0iZFXrKKCZwII+DpAiEA8JmAaCNbk1UyzxUsEqCyLSSRZ4hkj4XCH41bFlITh1E="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.0_1544641372335_0.9169561088693672"},"_hasShrinkwrap":false},"4.1.1":{"name":"@storybook/addon-info","version":"4.1.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.1","@storybook/client-logger":"4.1.1","@storybook/components":"4.1.1","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"03eaf5fe1b473f760cb393fececd20461074c54c","_id":"@storybook/addon-info@4.1.1","dist":{"shasum":"c79bffa5ecfbb91987f483fe3c4f5f706cc777d6","integrity":"sha512-2r8V6P7WiY0WLdb4VTuNuf0Oe9OHTmpdjs98B5444TxeCB+Vu4i0D+0lkpIZY3QFVbJsrZ+PL259p15gCB0KBg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.1.tgz","fileCount":64,"unpackedSize":683779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEbSpCRA9TVsSAnZWagAADs4P/2kxQoOvPeOtXckRTdk0\ngoWIzE0AxkXS6cfZiS/xM5VLVhD7NnJnPlhpET6xMNxXzZZfiIvlzY2ZkpLp\nB1UqHTtSHSUNDJM/T+4wZcgZVhfMOkOLsjJCH6FrdXi9EsD/BV9FldpoBqtD\nFuy61hZfMYFtdzOhAEiColUZiG4Lu+VUdyqcE/rEUUYDUhH0Ddb7EUAbRcJN\nQAD2hT0GYb3Ods8xgOXQYLFDqAhPwlbl+zsZtO4fCNpfs8qMoilTSHs42ANu\nSQfdQPDPVvBYapbWB+YndlvlpFLyhV/S/c6dKDHs3J42pdIrsuhnL6DErlOn\n0b2jMrvQRHx8k53mzHtCvvS2YEOGb93eD4JE2EJQLG6TrBD7qGaxLZG8nEkd\nfuaWLNpyulCN0QbNCw6P+RLzdWENEeZ/TWxRT66T1aRUNCTMJAJPQnD3X/I1\nwnY2wmmc7xv1FmdE6i1ngNYcZjb+6xjuxgc46dY/zMFFPgqHTGsc8iCpcHU0\nqLJo8CryEUmL/7nVxJFgG8cyFTt1Bk4R3QbelR6Rhok6nhJ6KV4/vwCrbLEW\nfgg/Eqy/yRVtKWw/K/4e6A59GUwc3eYIn65Zbsa78izk/nLT2kSHLHx4jSS6\nw9vxKy6jW7eoO8Eepd9dWELgR3zdUkfImPzR7TKUwuQTxunrMgD26rlCNpNr\niPWD\r\n=HSSe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3q4zKGmfLqdfbofAZPTM35viO3f1Q+JTKuzEwPRhvgQIgOFCdCjPHQejUgUlJpGV6by7p4bl/kK9lQJj9SDOhkOM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.1_1544664232619_0.6529454108605444"},"_hasShrinkwrap":false},"4.2.0-alpha.1":{"name":"@storybook/addon-info","version":"4.2.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.1","@storybook/client-logger":"4.2.0-alpha.1","@storybook/components":"4.2.0-alpha.1","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9d23c3dc1a9647e8a465e4032322f95c0f13a870","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.1","dist":{"shasum":"3d6f754de11112caec6928c8f837fb1d852cafc8","integrity":"sha512-CSakGtq11pxwpgbCLUUGFvN9O/TZ5GoPrTa6fknblG0riB7m0FH63RxTG5P3wYzTCZ7e3/0dj+9rBUveDgSXPA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.1.tgz","fileCount":64,"unpackedSize":686456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEb2mCRA9TVsSAnZWagAAMTcP/iysEaQZeId5x89B8fgE\nu9UWXGi51qISjVI2xlDbFIbtBMrYlVrU0Yu9ztJ6PtVpHP+01qCLpIBOj8Oi\naH/IaCZb+blaFhx9exOPPVTJ+pZ6pGCpGWHZB+wgqJUCjNQ4BH5CWymRIXey\n8/u6iOPMtguvW3sw/8+MN5sschqdYB3IhrkFqyb+8Ez04yrbAsvEVb7pJBJy\n2NiKRw2VUSx6dRc33qOAPiPD0aTnXLXYPBjkuNy3Th/8213HLWNaVtbw3p19\nxqk2TevH4wEM29/w+WAAJX7rsDaKdb21AeRkjewPwCmk0jB3D1jw3nqtGYhR\npVGRfdIMOsgILcvABc5lKTIeT/jx13nd1wBzDU/UjGK2WM5uyXqQogiFbXGm\nPQ7KLhfVxziZUSLtntu8mhyK7jiKolKFAHZcPvt3+dcvxBw1xmoc3lVhPHUD\nCtw9oY7to4RwPdV7J+IGmYWaSZRwSrxgPpVy2W5YF+wSaKQe7ai6pCGUHliO\n9HP4CxkQ3/ybCYwt1CuNryRQdt2FIZD8r5AQ3Qcttoaok7tj/RyaOPhtEbTJ\nWBj3b4gqDkr/OJw50uu5Y1pCDZa+/SwmcNqIoxupNikaTr2D8lfi+E+LmD4Q\npKxMPLT+z7AE3bB1IjlKhgXe97cEB7e8gx+h5OY0K+G0JQHw+4RsAK5rFHdA\nwuj4\r\n=2ydR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKQBdnyYIhmH0fHUsd9Lz7DSxwjYsMkPrs+fZ6pmeIjAIgGyQKxgEI2kDTiROGm22Kkhy1cdXHMGaD2ZvwaRaaq/Y="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.1_1544666533863_0.8550091537237121"},"_hasShrinkwrap":false},"4.1.2":{"name":"@storybook/addon-info","version":"4.1.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.2","@storybook/client-logger":"4.1.2","@storybook/components":"4.1.2","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c4a0f5de2bb8f8d4bc4ca3f4ceec0403307aa101","_id":"@storybook/addon-info@4.1.2","dist":{"shasum":"a02bc0ab292a114502ccb59c5965404c030e07e1","integrity":"sha512-YARf46iSAev89weFjxcp6BDHx/AsbziRSp0SiF0Zzz9zTI2gV2W1I+XB9DCFFPvcphd2tqf3eMEOFx5yIYaOaA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.2.tgz","fileCount":64,"unpackedSize":683779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFm3gCRA9TVsSAnZWagAAkEEP/1ZXOyOZH2G57mvDKoZ4\n48LxNDVfl+tl+CXSnNsGvlbArlirsNBCtE9aEZoyz7+GAHWO1yTn8lw1qz1S\n5p8VGH5hkdWRKLYhvR6B5hCLr0sP0ZyRpvVGzv5BrrbYzEplOJOEcdvscZW2\n+A6RmssOd//FWOXq+fpONbOrAft0JaZWLB0V0rZ6Y5hfB784Ssi7Qi48iNXs\nHwzsBNWdE/36InYDRnA57X9syf/3T1c3hWAIKdrQHvhRN5D5+0gmJKSI5ujG\nACPKFvIoe+3Lb0SvpPvlIFlW8iQyhfysUBpl7vGSotXWI9vzPsHUydgOUecA\nR+InU1vb1mD4Gm9T/OBJHrqWWczwF2ME0wSoKtxGzSJtqyM2SqHVWNSpZu9J\n62Bkir4pTQTu0WrhNtrUdbavkGOqcc9Parzh1b492F7KQVxC5xL9s8A8uzL+\nZF1ADmBAFCeFpfm14vRoytxOXMD8Tycc63GoKFSky+WD8LA2nXvK0Ny2QJK5\nys5K4mE0+Hgajp5kpJk6gk+mZo/nuyFBSbfy3cNfU6VF+6g2UPqo5YLZzQAq\naUWx66eZBZCxAp/XGnNA6p8KWMCDPw50WVih2paz5QWqjhE06gdit6YyCTvR\n3hz6iP38kTbmPtOHPwMdptGn22G1Vh0D3kdfbW8OSRpFSqT3crREBDFJhX/8\nu9Xg\r\n=XMA+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWcQWtaljmUMQIe83fQWlztEsbK3xdQSjoEZmwU8QGWwIgGenEnNz3691gYCcya5X+kU5zX/0ADPI3eALkrFSOcS8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.2_1544973792283_0.9064163839913686"},"_hasShrinkwrap":false},"4.2.0-alpha.2":{"name":"@storybook/addon-info","version":"4.2.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.2","@storybook/client-logger":"4.2.0-alpha.2","@storybook/components":"4.2.0-alpha.2","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"abf2c4e1250d5d4c55b992d85f991e40327a33a4","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.2","dist":{"shasum":"d9289b9d7c6a215a7531d8f7f40ec03b019e5980","integrity":"sha512-cPYAQifQJkYCbxCu82Tl8lNGbuatB0j2GvVHrcT6umfTq7RtDmDJLgguNbvhdqQ5pS8r93SKAwzJx86zA1KLdg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.2.tgz","fileCount":64,"unpackedSize":692488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFn/ICRA9TVsSAnZWagAAmwQP/RiYaUOsGPxlFnELRJFh\n2vOR8v//7H3Sksy2vI7McduK7ML78YyyyLfQ7FIs2QG5IACu/GBR7lKXe6E5\nd5fQGOCbZXeKx5atf/vOM8VXgkjFkU2KowyewSrA2d6Df7VvlPDCDodY2o7x\nS2/fQuxUfYzeKtOWe5wLSJdCtzq1m5mCssMojvpqA8An9ylnjE9GXfdCRZhc\nUjFGZPJanGO720fYvQD8Pf7qlmNFJAs1yhahlYMWht00Daqy+vGB68gOF/qg\nQHklTZArgTG4/ybiXBt4/65xsY8chsqtFzlN0Fa1kMxEw7GY84u32lWFRM+e\ntf5eB3u+9bTfzXdE+l+3/TiU/KN9j+p/76UnGADIVFuGQ3maQ81xMBE7dHpU\n/uO+dWk4FjYfnBIZtqaXLogy6ENdW7G7wWXOYoxCQA83a64J7vn63xEb4c9/\nWld6a9fRZU5WCo87LFj3RJk4psajShmzhNCyn8JTJlpd0SL0Bk9tSpfi6fQz\nXV7X2bdjALI/PcbPqMEBnWGISQMwBo8OKAsyCYe6TgWsCLS98y02rWT1Zp26\nEfX5neDC45FDSoImEMOynj3oem+o2HHZZ7sfCc8xqmDG8VGYhIGdh+czPnjI\nvysKXp47l4HRG8PRSPJVGmphykeiFDVuXDYK8AZ5DCTXEiJZzIaRRFoF53oN\nDTxO\r\n=s2Tj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGg7Mpa7D4OfRuoc4uhyRy6dTw/z7luvGMHsbL5y/GfUAiAo+CRZ1kRhi66H/NsC3I/MqwHZxVfvW2wGOxsi4AS9Kg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.2_1544978375738_0.823337768824443"},"_hasShrinkwrap":false},"4.2.0-alpha.3":{"name":"@storybook/addon-info","version":"4.2.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.3","@storybook/client-logger":"4.2.0-alpha.3","@storybook/components":"4.2.0-alpha.3","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"15d34d0f3ee9fb191434bb5447824beac4f360ee","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.3","dist":{"shasum":"c2442381aaf4495adb7b3ab157198cf347f11ed7","integrity":"sha512-8tnM1zv/0HjWq7KpvHgfkZnhCf9iHe/6key1UWyVnfXnVZfteyzCxnCujjZfgw9xLN7Hj42vT4/wgQhZN32akA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.3.tgz","fileCount":64,"unpackedSize":692488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGQzfCRA9TVsSAnZWagAAL58P/AzBTX6q9ptrcx1todhB\nxZEubtdyvS5bdjAcmCRv1eXILW3Whtysu7hpC3XPinDRzx/1KsT9WusvnsXN\nPX69OyDuDBf0RLgaHFSQ3RZWgOw3DesBj6dDK5dnPsfDvXLtfwO4TYIuuWgE\nmVzqg27dDujO8h3OIg0xu7TqMfFWTm5P9cM8R8q8HqC69V4jJff8bXSRpJU7\noMr9x6arPKjjys4RxhHaP2/D/5zVaqaIvp+qyrXQAmlbMHYu1aJNps9de/nv\n72Ixz0VaDH3CugGoBh1NpxrMdrDoS9KL/90YwyIpyGWmOWQPkyT3mngBDFuZ\nEIFqHDhd5BnUK75awUrbDs5c/bjrhn1kl5C8woiJn+7HRgIXMyCXu+UBtgXL\nH+QH/v06A3EbVXKBmChv5xllFV7RsLl2EdOtBhT5rtGDtDD1ajerAMrkzjY0\nuOBri0wCvunHNHAwc5kAAq4I1kyOtURbNfzKSXRILx6IMiF163FosiGG0B3j\nu/ZhY6z4f27hi6BnsRDX3aCibzThwzN6mFLBfO1cBypsbCZ0XHaocJAAGOSc\nfSIkxl0/JhOeSa4oQYEED899+f1qUnEzaKr1Zrbqm7EhW+5Je10noXVBRtxq\nEt4w2CIBchtLI9WPHR0tBsPPJ1QyYC5sgpdcECHFJ9OSB9nF5e/bw8Fqibys\n4fqa\r\n=Mkqd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEP9XL+1V9hU1V/iKk2/WDUShYLlyTf90+xnyhyoyMF0AiEAwJxaMBgEAL/KYpnSTF1JepPOhHiX3DxDxBM7frSSkd0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.3_1545145567226_0.5024758662176989"},"_hasShrinkwrap":false},"4.2.0-alpha.4":{"name":"@storybook/addon-info","version":"4.2.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.4","@storybook/client-logger":"4.2.0-alpha.4","@storybook/components":"4.2.0-alpha.4","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a5b4e89e4cb2e2029d0ac881aca6b19a454b1821","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.4","dist":{"shasum":"12b1a224dfcf3af7806e3707d89c62078b17985e","integrity":"sha512-YJmBOzC4kvXU6USh/z+pmKLzWJV9uAej420OctDNXOr43bd54QoJlhPK79wjH++xHD7ia7+TnUGKkAvWl2Wvyg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.4.tgz","fileCount":64,"unpackedSize":692488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGfJDCRA9TVsSAnZWagAAzLgP/jKGpmKf+YWEI1rubf+J\npy3qX1ZUDR49M6dlqc7lUHdAw34T6pzJzHEggfDn68RI88eihrawQWWb7Nw/\nhnasfcyO0WcdPMpbTx+ifjC9Fcv2vRPzvFHUEDAWROCaCVSR1zNSdaATB80/\nbW21UvyRkSIPBHtF4mHlLh4IpiDbAJsw05aal5bfRYBXCqmyxIR0oc0rDcqv\noGCOnPm1Zq9soSqSd+Wf3nmNtWS1gK7v53CAkZyxf18OQHan0AB5eRe6TJoU\nMC2o98QKMuKmo/+ESftJ/dUt2dSz0/XBp77x3f4SxjfIdGzHB5RosXxWjinF\n6v6Y1DVynoF/tUBLMnUP2WTSky19InLcauJQnp4vPsymxM5leLxrOiGRd37e\nnNqZX88nPNB+RfZFbkxf9DjeV24QCxUKIs0ocM9dHE9u8/I6jaYR+RH1eYu2\nDeLBqHqKcf7Af3J34k3XD869Foz83YJr2K6vCqPg2SFkg/W8pOzi0OpMpJjt\nlcRlzleci7sX5j8AHKQVpBefAON4cX1lf6qbwia7xlKqIqUiLWQrlyDKWmH2\nXBD0DXrLc77jyf4+SFWo5aF7kbiA3mBYlUfVuDtnn96SrBfrtrEp3ikqAvzU\nBTZUp9JlaUiW0+ra/DEH0FyOW5cjHlZyFimjwMLfTiuZe7aZCBAft7iR95qz\nGuXi\r\n=RtjH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+5opFDoL9ITxbkSa04eTcfEMfemzGgAKeLikQ5oSR6AiEA/MerewUJfO+PG9wZxejjdOwLkYp2/d3dnXSsnDMtGh0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.4_1545204290861_0.9766874550082001"},"_hasShrinkwrap":false},"4.2.0-alpha.5":{"name":"@storybook/addon-info","version":"4.2.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.5","@storybook/client-logger":"4.2.0-alpha.5","@storybook/components":"4.2.0-alpha.5","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fd600487eb3d295b22c3b32ba659f9b3ce7ef3e8","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.5","dist":{"shasum":"580ebaa211e8b1724be0d9365b511c105c868ffb","integrity":"sha512-WT2UbfzMq+vZsKB7NikARkqCbwGsupG8aMe9ppv6U8HM50noHOuCNBrqfh0c/OXYepyRbhbBBxXS6fkiLXzHHA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.5.tgz","fileCount":64,"unpackedSize":692488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGmzfCRA9TVsSAnZWagAA8AoP/1pEEofz2P2/zt7TxwsL\netSd6Vf8o+6ADrXCDSf9VgZkJ/HjpxKIFXPnBlhU3+/vfof1vU0S47dAXE0V\n699KpzNgL0IQmPa5W3cwsKSC6TPlovsZbZnJ05DXMUiPMfnicBKMGF84qZmi\n/fAED8W0OWDh4xrfJ7HIw24yMjoi8cGKS1GNk33AVh74FMnfdyH9OCVgy9IU\n0KAGndwD2TLBZqv6ziz7wG9nvLRC10gPVPjZQAWkOtFMhx9BH1i2cGRlmPsO\nf861m9i9TOjYzS5cdlib5DjUcrwvl+WnBPVdrrL+ZHDoonooXMQLXub4n5ww\nNxCxJ5GXFT7gtOqsgTyEia/jVOruoptLlzYX3oQOdbkyT7vW3d190w81cqch\nUdzVen6ZFzZnZofRqrGaPQj9onSBqrWR6R/xRfkwkQwUMg+wtoj1aUa7yM+/\nsOZxYqDGlXo7SRYCuaBM2fD5CpbQBs6bWrHdMtcd277dV4+V5tXBZXG2LWa2\nI9SaD7JfY8+KJKpNnwlhsqc42JRfW4uGELm5WGVKkiqwtil+SkU59b/mxH4U\neghnohgFCNzwPQRDXHn4mAYQTrEZo28npQGVtpOepAsHuf7EbDjF202vLtG/\nmXdW50Btax4XC2ZNMFZkLgnchY9Kf4SXfMfKsLbIVDQ4aMa/Vxg3NuCBeuXg\n9xFs\r\n=PvzK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOjbs/3NBvrlJ7vw3wZwAQmFF7HZjL5jEF1qde8IXXyAIgMPrd5Gkylx2Jm/2biwIfFoCC8qRo21W9pSPmSJwggrk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.5_1545235679319_0.22798117224725467"},"_hasShrinkwrap":false},"4.2.0-cra-debug.0":{"name":"@storybook/addon-info","version":"4.2.0-cra-debug.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-cra-debug.0","@storybook/client-logger":"4.2.0-cra-debug.0","@storybook/components":"4.2.0-cra-debug.0","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0c1bce162c2cd7f3adf56e7c0ecb9df7603064e4","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-cra-debug.0","dist":{"shasum":"692db2afd4835642b4a221514b4a335ad941edbf","integrity":"sha512-53pERai1fbR60ZpAc97dQqYtjR6pJNzb70KI0wiikvotxe5AQpJ1JSN4Amma0s46wJjpMKmNpAcKQyIFKEq9/w==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-cra-debug.0.tgz","fileCount":64,"unpackedSize":692578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGvUTCRA9TVsSAnZWagAAt4IP/jwjKsXJNJZGrN+N1GRB\nQgvHc43zFsP6utNzlbI+ocSwUc9EFQFLp02/niASXWLQVbfD2hiVlrYngKcj\npyafDTJ7hbsSG8wMHhwQU7G30nUXHKh6BACW+Z/gV8AE7GOFA6TbGGQPOPxA\nYvsdmnQ9q4WUID2owHu7xrQMyDHLW6UwQLDVd1/8G5tapZTW8Fy0kJgvqrdT\nEuIPPYOaRuk/vr+XoJy5w7nUy+5nt3B5+xILgbn3NHsG4dlAwxhozN06VoWg\n1HLFf94oUEVHL/KghWgv7yJlcRLlvSmEgaoE1f3zbi/gkmvAzLZrV/3o6Rkp\n3lA/SNLZIQeeketaZ8AWlgqSI5RDB+VIy/Uj78p59rMdsiYCzoCZ4fOPfJ4B\nCv7u8E23Z3D23fuugzc5TkOBTg78UIFfvTqaogEX4yeof0xZucLuAQvWMEd/\nJ7eF34MKaNq5YcUOten9dKEygb7aor7d/Ocfah9PAGzRkYIR3UyQ4PWh30+U\nofzMKQ/OLeGvHG9ynlAu7u2cXM6fodUibLoghtWTsfyv11T2A38OKozfQBA7\n/dhcgIa9K0jKccVpjtMMvxkSFuhPysSmGQALBFpa0Lca33Z55kYePw4eW5fw\n9eg+90I+wyrtRim7secRxjPGvXx/Ud0fKoi1XD1OTLuGA3KVPKE5fEd5Ckxb\nuuvL\r\n=Paq5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAhQ6r4wQro/v6XATvxGmLw3qOMqCL4XLxgOX6S0NiqAiEA5oD9mE7zDwg0LSYT/adu712MEZu0bHWW0ujFC9TrLi4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-cra-debug.0_1545270546592_0.9413383902197263"},"_hasShrinkwrap":false},"4.1.3":{"name":"@storybook/addon-info","version":"4.1.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.3","@storybook/client-logger":"4.1.3","@storybook/components":"4.1.3","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"28497a9bbe829f0cecfdabf8d18ae92e33d31db6","_id":"@storybook/addon-info@4.1.3","dist":{"shasum":"4f3efe9109da7a939ab7bf803cc68d678de5e9f2","integrity":"sha512-3pV98qLgvuxX1s9GHtiQ4PIW/POLV257ja8ADgHH2EGVvItFjbHUVTan/rK6neXz2WcMJywp5/9jyrXCkFgDRQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.3.tgz","fileCount":64,"unpackedSize":683779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcG1ErCRA9TVsSAnZWagAAkdQQAJu9Ht5vJlWhWE7ze12n\nt3FKDNgYcwbn4G0uFIyaOORLuaz/RRQQ7weyQiUSLFGWWGKZSBCePRGRhTCm\nfWXvdx/9LK15CD7Xp+/HBU1N/w/k9zLLKbQP2m/8Hfc+7znXbOPlqYKNB8/u\nLStH8MMlsYuvlzaVDnXmsOnKMpWk+/9QwaZ54PwLXmc0nvTmhQD/93NPAt6c\nSoXWyufGo5jNkKIiqcYCpyfdKJz56Q58MB92HaazXSTfbISIsl4JmSd7ikNm\nMh4xPau6ck/ZbPq5wM+z6I7Y3nr3dKE3QZZQ4rOaGVRxsZavXDNjvKp7+V+T\nkoRohM7F90GaaAyJ1XbUwR/G/NRRn1zPCQCo8C4CBKRRlknb/lwU/cEgHFuj\nzXOa1aWrZF8Lz1k3x3tX1xgsAiqE2/Ro8LlTbGgDCwDlJtn7+kUIa/SsmUzc\nWnTEBDhc4mcrG649bwXgfenODbEDGs8N1Zkrrrx7pv5J5PrL4vciV0aZGO0X\nfUEeaGNdXKoFrQ8KXHF1VawYaZF8m9BEl+N3fSUKDf39rsrKinBKrdmQ7w1L\nZfjLZBt68egSqEYBBMbJRvT0uEto41czEPJqDHMRK3MkET74GBloItKuzevr\nGweDDgNz0imoJ9Thi8BSCAr59prjIC9BxMjFJZ3vony3nOj/Jmc6w0oZqi2Y\n5+K2\r\n=VnpU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWfqqgXaCApxkrx+KKCPFbH5/baaD0q7fcBGzUVOqRKAIgL6+Hs4CeBdShvBrMOKXGcS1wtxEBQDF1OMKQs9O6xLM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.3_1545294122512_0.4309827791885039"},"_hasShrinkwrap":false},"4.2.0-alpha.6":{"name":"@storybook/addon-info","version":"4.2.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.6","@storybook/client-logger":"4.2.0-alpha.6","@storybook/components":"4.2.0-alpha.6","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"bb9b7b3d5b996ed037001f57ca60bd26ac5c1326","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.6","dist":{"shasum":"852db9adc475b2815380e5c32da574fb8d801ac6","integrity":"sha512-aqGhYZWQewC3ycwzpvhRMvHeZaxDVGKQjrNMfeAoUl8gzwV9bwpSB87iHmIlbtbbrJIELTkhlxfjo749G8RMow==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.6.tgz","fileCount":64,"unpackedSize":810757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBaQCRA9TVsSAnZWagAA1cIP/2nUlonxsi3HaZMJfoyO\nxlXRA7AFbG+D3wMdxzKPnHHOaZkDSibuMiR9fH3QhY9AlSLfzqk/L46KTY4N\nCd127lkZNuaMCXeca67oIm+aV0ibexAQv03lu+6VvEUUkFoam4uduxPk76DZ\nGdIZsfvEevRXQc1q9lK5EbI0VF82imhb0YSpViTIG87At2q7luw4fcuxzEvb\nRj2O9PR/+dn+d+o4k6giQtu+m2NxdFQpWhYYsF9Yj5RUcWkPm7FL2tqO5k+a\nQVJe+ed8euq0wnN5ZNK065eKAw8JPBbkGQOqhYAHBm/4GnPc1V9wAvCfQwjt\nUe523djmTcQVP+Z5YTvXE18E5CD135Jz0MFDREoTQrR4dbe8HDoPxgOLkwwZ\nZwtBVAaj3as/u0HyZckiFZh+pTjSVcS+skvs0UbK1w/0EbCWSKgtBXIXQ+sf\nd81S9akSGcOaI027Gib4LjxUQHX2jaf7SrLAUc1NorOpAiFMo8/UBekkD4Ra\ndfApbbbdk68qoBnYxtOZjPa4UGfVbPDrI3yhctDSOzOjrDYBaKVjTPkt40bx\n0sope2IFKFT3lA/uf+Nryap3VGMvIOiDUaIbjUet9BwxvaastCXmhWkpwKO6\n6DQMhSui0u0s2N/S73ttSt9w4D94WGuVJ7KLtbKCtXP1Cyj4lPL+7EVAZeVX\nmU/W\r\n=dYGn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTXOtiOU33l4hWrHvlLkMCMq/7diuPngbJuW0+hjDpLAiAUAeIypbYYBGwKpbspFsgZszn29Uum/fzhld8mlXHuAw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.6_1545344656252_0.9534017782005206"},"_hasShrinkwrap":false},"4.2.0-alpha.7":{"name":"@storybook/addon-info","version":"4.2.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.7","@storybook/client-logger":"4.2.0-alpha.7","@storybook/components":"4.2.0-alpha.7","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"beba7b395779bdac206d53864ef01a187ddaef97","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.7","dist":{"shasum":"80eeed79d4fd443fb9322ca4c54911f95b202187","integrity":"sha512-e5Jb+wnVflsmpXoz3n3ycuCDergvHn2MS+e5D5cbpY0oMtvBS+o+WYlc0VjMkPm6Is00yazqF5/m9CJc04JWgA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.7.tgz","fileCount":64,"unpackedSize":810757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcIpRDCRA9TVsSAnZWagAAH5UP/30AP79o2NwDn+c+Tx86\niwVz7JfMxeMiihZOXjodWmj7Ly3x9vfkK+wDBRCWLrEPLUq6BFvuMFepmO9r\nXvSMQZ5vWRCGZeo6SyqN/RJATfeQD3T87Xe51I7Z2XEkmmuEjPwiUl05RDZb\njjHpb3WG06FQWGiVOwuPaxUWJMEePrhtMwnjbShxP6ISn5HrFhvjMZFpQEIU\nNdHJA6O7ubg8kyxy1MkWqQF3f92MiUTFpwQ8RR8NmsujJMzekoWhmnhVZ5ar\nJBNrr5q3QGEA37w7e3KmVXEz18DQfWFmdZA926t6aVO1ff4ftHtO5Xls1GYV\nn8csp5u6Q6kxNrpLRu6EFyNqYClZJ3sVRdyh7hqb93UDWemiS4dZz3jQjtx0\nuRxZ2w7uv7m/xjonF8Aw+ppua9nz3rbHkz9OKoui39kRw76OE8JbDfhS/Hvu\n14pgccvXSCW13GtSaO/SajsmSCcJj4Zx8/sV4CUlztUbmhwetgQRz60q3xFW\nR681lRyZqs0PG1/G8Vzm2X/6K9K/3hfjzSlS/hBzmkQcOdTre4jAUgrma+pN\nW/M9Qe7HXu8UYosjSzsvwpFZpFsh5/n4u3MrVR8kynqy97pEFGXPBxnbSBOd\nmi61zQA0rJhcd0/OlZbV8VvRDfsksP4jG96tWpJvM6xt/W/7Sf4DQo4PFXzW\nJbR9\r\n=fX8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfVJ0r1RHSiLKEpQNlO7bRcDbjXgdKdYwF0fI926IYrwIgTGcHIwfLpE3zaf1o1ypgD+Z+DPCZClf5YKLd+OPQVdU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.7_1545770050407_0.594889247207059"},"_hasShrinkwrap":false},"4.1.4":{"name":"@storybook/addon-info","version":"4.1.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.1.4","@storybook/client-logger":"4.1.4","@storybook/components":"4.1.4","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9771b1ae4b2c4fe007289c5a41091ae85113140c","_id":"@storybook/addon-info@4.1.4","dist":{"shasum":"f370543a9151a31a6b2ec7fa5bbea544dcc15eff","integrity":"sha512-D6HUZ1qOEXN1jtIbcn9TuB/sKJlgOVTb7YwCyaKWIF1WIZ9xumoL4t8jl4inXAbtPcLZ9e+oE3owJFKYXCQUTQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.4.tgz","fileCount":64,"unpackedSize":683779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcIp0vCRA9TVsSAnZWagAAPSYP/iracaZ9EFaf4nFwkElq\nVSccmTwIQvVTJd4Zi2/vPXZbx83vOBwQ65aF50VA1NypHNe6gt22st5BNnTE\nUUkBQnsEN+L8AOXn0VsSiXYlAKGypuQOXchi5jOrp5ayE5tleO1p2qoKUj0k\nZA7SMkAH7sF0yP3dFKW7r81o28bg9lsQA8OypKJTDmKAdEdkhK/vhBZUt1En\nzUHI/RqKe5GPrt2ZzLnHaBlZ20pt2UrEQTsL1l5Zw9UrmVL6Of3neVbwPA9n\nN/cI7cO0dKfdAaSdqyr2Gu+xIuyZfvz316dbPaix6oeb8dATshORq0wVeTgP\nrDRo25Ges9gSJUMb2wwj/EQ1uBjm3H/XltWfemCBKEMmRiHEh3y2iEiYBOa0\n/3DlMTAyFgKJj//JlRaoWJalTVqA5N+4yJMn7kDx5H6gMovjCoOxCgM6aIjP\nCcClL2Wiy9myc7wSP7bZt/iDJugzlfz3/jGpcsiFwQPLJoNiA7V4YFjikARw\n3ydhl6hnD9HIAiNZjWX9oy5yGHo9DO7Xeqw4nap6kFGkDaWsoDyh7kqFudy+\n5s6zpfW3NFUta5AcChYpl39f7ffNKMH4d6VjSoaiW3OQWMzG+tHQdWjCDIu/\niQ2ZW+kfB2VyYRhjwUkYnWyLc15M7a+2O2xU5ROHbh4q8WBoXVwudvcN/Xqb\n7kSC\r\n=Sga/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8cCMNG4F7cq+x73X8m1swNRN+pb9Phcvst3aBmAjqkAIhAOk2PejV6AWRNdB1pLASChR9NrxqOiCxFmyBaQujsFHs"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.4_1545772334918_0.7600868362523268"},"_hasShrinkwrap":false},"4.2.0-alpha.8":{"name":"@storybook/addon-info","version":"4.2.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.8","@storybook/client-logger":"4.2.0-alpha.8","@storybook/components":"4.2.0-alpha.8","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1723c492fd1153251ec1a87c33090c2cdce68c10","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.8","dist":{"shasum":"ce412fcce71e51ef405992f3ed91e72c5001f7bd","integrity":"sha512-Bwd/WJkaRlBwrprt/kIZ8lnOQYk7+kPj3lSvaqbCbhkT5p6Tr10gHTnxkxrD8CNmPmsgcvv+jb7rMC2gpRPU0A==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.8.tgz","fileCount":64,"unpackedSize":810757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJZZ7CRA9TVsSAnZWagAAq3kQAIUV+5Z7GkeUIsoJ1rxu\nEGu+xcE+leEGDtat9DD5mFemmeJQ29m1E5cIC1medhEqdfqwem3b3R6e3vYI\nlHkksbXtvhOydDXh7QyAVbOGp/Hv5R2kErfi8x5C4Zn4eUl7R38XS9K1Qhx+\nLDZTIC9FAkZ7WUOJnxLIr6B3vzrQaDsaawJtGcIRBmXxadj3ai1GUrFTBoqa\nNkmL2TjNHbSEg/tk2N9xbN0/IsqATAddAzdte/6V9ZAbProY3aHjy9ESFcc0\nXA0UvWpiBx4UWmLxP5qnav4Wo1zNIuUfKSCnBgutKEt/J+ujd57+s9hW9O26\nQdAB1zGDVycymZSz/ohlpxldMo2FPkN0XtWemd65/+eId4ut3QcmR2WTkpVC\nPmrTLbExYTxVtAP0kTNfu+uTjbIE5/ggoLekdfHXehVdgnUgomTCz5AJnJvF\nn4kYLqY4K4SBUHlIeHLz+EJ1BxaD+LFBcPEdsvtx1N2aGHpyh8JAZmLc65Xl\nj9kCpPs2Ow0co8edObuoJ7ZddcKsduIVO2/7oJyzSOuAGlzTHOppVMR9vasr\n3itqPfVSMGda9IRYY/e767WjsTcU0jZ8Becib9v/pDPgenxzsn5umi2s0rHv\nTr8jkAGgFc6UjaB908xmMQLApokHPRNG3TwMU/wqjuq+L6pRiwbM8QVvzYrW\n4bsx\r\n=I1xV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbv7mCeQop2bCrSPG4+gJWBiFr+Lkr37uzHjxLxSRMPAIgN07JBNUPMiWwAaSVamx2GIbsoV2cWgDgH1gj8fvH+30="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.8_1545967227043_0.20153955589422257"},"_hasShrinkwrap":false},"4.2.0-alpha.9":{"name":"@storybook/addon-info","version":"4.2.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.9","@storybook/client-logger":"4.2.0-alpha.9","@storybook/components":"4.2.0-alpha.9","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.6.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ee0f498dba1b88b81b34b89bad13839d3b19e978","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.2.0-alpha.9","dist":{"shasum":"d8c97da632aa9f1796215da120e9eb34caee57ad","integrity":"sha512-ffUXjw+zFcHpzk4x9KPmA2BeP9sujDzUDFfJfeCpceg6QROXeK/aLIO6V+Dr8GejmKVmEKjgwE23zTCL7jkjiA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.9.tgz","fileCount":64,"unpackedSize":810757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLuO8CRA9TVsSAnZWagAABzIP/3ZECjGt5DmQ0/tJjxy7\nRbELlmSvxSafyblWsx61eNrSNKTvjfPScLWjOejpSgoW46SzQmCdirWNGzui\nVT6/T++ySn+Ka1cHJdrm4T3D4gCCg3zgmJZ6kua0h7vmbIhgR/gVeDaN3/C8\nV6jddqwi86FJpjt5tMpm8RSMZ1N50fBroJy4aG7ZGtoRAIexEX9N5DD3a34a\nNl16i2/wbPz1JMhwcCx28+zzC44BLvOMZpw3TziCaWGqSG6OUpDK3KINUrYa\nAo727FQzQ/1AYWmhZWiHjYtReZI+X9nvyd5jHUqu6IEwimMkCX4+vZBfeQEX\n2dJwLW+NfdL2SYkIAYXhslS2w5CXbfugRiauv9pKvW8wyrxWnJfI4P8JTu56\n09I04+0oShWwxICPG6Po+pB2lIEMcKpHJmZqu33ok0uRMdXqoHuNwB8FXQ2p\nJ+XyOi0YZ5fBYjQOIunWvyvs6wQmsVDTRQUDNtoMz853A1swErElRRO8kDKT\nDwIR2euQLf7N/GowSuPrSeFM2/bPiufz744NsI1N0gFnfh7krgUu7mCD5XaK\nexVgFInh9tXB25ESxUurrgWUPceUl476HSzVfcu4KHSPASPwN3VAISyFJkSx\ni6tFWj1ozaDxV1Lk8OSuswtWhrpZLr/MyeUdAZfJPfU6MFI2or9c8HKM8JXe\nur1D\r\n=gbiT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwkYM0BlJ5jVy+vcE6L0Dva983NZMtkf9d5Z3fTtWrjAiEAleBS+bb5Hux7YU5ajXw3a9p35iz+18+kveqTz3xaIu4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.9_1546576828274_0.9523577264874115"},"_hasShrinkwrap":false},"4.2.0-alpha.10":{"name":"@storybook/addon-info","version":"4.2.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^0.10.6","@storybook/addons":"4.2.0-alpha.10","@storybook/client-logger":"4.2.0-alpha.10","@storybook/components":"4.2.0-alpha.10","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0fcb70b58c24ef0906062b210480765dd374799a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@4.2.0-alpha.10","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-m1j9wu3uCJykhv/8xgjSpAxZXrUde805KeS8DMURBFlAxSmxpOWREn+exa145waFgbJL4qSZA2ojNGcYHqmrOw==","shasum":"14bf369682fba3d7c94359601d157fa214308551","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.10.tgz","fileCount":64,"unpackedSize":810761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMd/aCRA9TVsSAnZWagAAHCgQAIKPX3jkfcSqvS8mQMWy\nUCp4WmNxf6VVHQKCh48Wk0wOmyWOeEQlZsPtb/Va73D7gBQGzO57W3LpILq1\ntzYFTBP7s2FzVnnndn6PIjjHOY7Hcq+MQ4tlp7GExglkf5LlWpbeLX46M7Xv\nCP613zNjuEBz17QiC5EGay8InSFsb6tRJjZY+iy7yDc9ibq/l/Yr6j06MsI3\nP9hjHtU2qKzYI/ZmCEZ6/mw9+0s/1d3LuJ8NC8RbheIRfiP0lvp9U/33QF4l\n0juLiO1ChfURzNNpNIZa0+41qnrCIIubipG3+KePG82GhmUgFHhR4GVlb/K+\n3ZI2B29/ASeBii2gJgKSkU1LxV+eK3CI5gj258tzhhc94dEnG6BIvMZePXqU\nrUBBiu+U0Caa8KilpAYB/yf37CpYA9yeprfzY9IKhdr9qWd8giDOWpW9AGfM\nzIJb/WeJGuTQMA0RabHuHip1cpLGbPJtPxmEJ3f9dYEqALxJTyIQzQN9niLB\n3tVd+cYwxv5cP7y2AN1OOdX6C2VXKIrki7HeIo5RyccYaUExsM3296TWfA5C\niwB7sIDu1USPmzRSeduK1NxWSDjdaGVzDBRyfn0zIL4Ee8pDNeFnvCi40cZM\nBSHNoD2aOpVoaRlk93PjJs5oOTegHgGN824iLB+ENfKlQI+lR8os5aepeIEJ\niJEp\r\n=7Tpq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4GIs5Etz9LhchzN9fb9XVcvX764iYtt5vxXjWnyYpIAIhAKnEQwbLo9iY/cpnC3jj7xNpBiWGPd2Ixi06tWtxo0cT"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.10_1546772442044_0.30887741241015765"},"_hasShrinkwrap":false},"5.0.0-debug.0":{"name":"@storybook/addon-info","version":"5.0.0-debug.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^10.0.5","@storybook/addons":"5.0.0-debug.0","@storybook/client-logger":"5.0.0-debug.0","@storybook/components":"5.0.0-debug.0","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7cacf4b23fc7682e0891e8fd4a3983e8879f84c5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-debug.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-SYq/n9NdXl01sfO0xR4pF/1bz6/XGLAtqGnY3m0Xoa7v6Li9UnFvR9labiKBqlKjs7d+N0XGCpC7Zyt1j22lcw==","shasum":"37bafbb3e89723c374e3bb6f71a5af69ea9302f7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-debug.0.tgz","fileCount":64,"unpackedSize":707342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM2o1CRA9TVsSAnZWagAAEEUP/38icVj+54FHuHMf8ksG\nQo/dN6euR4PHWXOTq+/rfX3vbsqvwYu4XyS7LjOMw0Aiu6gtvlDQ27gXwJCb\ngp42jfMD0+giwJyrHmnxg/YWtA3zNJDdqbMzjd8lxpiZEoQPnNhDAxIq2H2P\newZHjunKejn1I1rzcM/mMbq8u5UJ2fDmFY5WYcxzY8jxS4sX8evjhY38Cs6B\n0UAhaSWmCfkX/u/Quq1Vas6MUZb812I5MTyS51WclFoTJEdqKNWKQl/1VrBH\nGeRIYKAo0yOICb18xV+E5nSNGGD6fqMeS12IFk9Pkg59u+Ft8wL5FwNdwXNl\nkPMdBwJcpw/b/ycIvJxpAOu063dSvW9Dw2INd+S+AMUhNMR84BcaMG+3RSer\nrW6luVbZdT99jHaXIhZsDDWvXx7I8/PLzcDr81U/YIlZX8KAtuizyB3BJIh3\nOQyXu6liANiItqvtZC34PyVwk+MUrwFm1UVo34PlEKA3SorcgmlIEhhxgJxb\nKCXghitI0Sv2YCvF+lLlRLGt1+9dHLL250ujo40hyodDY2sQg1P0mELwae5K\nNs7H5U+89d0yNyC/DBj96osa6th3F2fyO+gXWs0KvsnMGZ6tcpgSjVKU6Ybj\no/Yr0Xy5sGPBFUvycYRHfwkawTcpu5wE5QfAInXxS0HkS+a3flWkaUeQQXsy\n2tFA\r\n=TXeF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsHI+WmYEFk+HisqJy7O16m4iRG91nlij+hkMeiHXi6wIhAKrENhOEVORP8ZzYTbJIB1qzopnTiJWHTiVdORULa/Lj"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-debug.0_1546873396791_0.9204734200648541"},"_hasShrinkwrap":false},"4.1.5-react-debug.0":{"name":"@storybook/addon-info","version":"4.1.5-react-debug.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.5-react-debug.0","@storybook/client-logger":"4.1.5-react-debug.0","@storybook/components":"4.1.5-react-debug.0","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9f6ec6d8393eb94ab4685839ab865af11aab32a3","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.5-react-debug.0","dist":{"shasum":"4052acda9105310dadff8bcce9d13b481b76f011","integrity":"sha512-ZfQasWP1Fqe2nfpyZ/FGC+alI5SLbxJrneEemvinmNTqmaYVfaFUwZ1+fnU1xvb/tJFtRSnA99I2ihVIjc/+nQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.5-react-debug.0.tgz","fileCount":64,"unpackedSize":647767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNWwWCRA9TVsSAnZWagAA7xoQAJKBgtUYHipXoHy72JE4\nw+P3zc5Np2C1xZqLO73Xo8mugKwmoSOXqlttmv10VzoeizBj8pEaoxkRD8RN\nbCbuIeERb0crgxZca8rVfFbv+AA/S7b60UCj24JYCplaC+GuaoIMdpA4l5oO\nSq9Ml1qZLBDJE3Ja81eJIz99xLRJk25tSMCzyo5Pbgh0VCJ9jKwgtYikNrJd\nr0B1PCDrH/ZD8yGxXuJVVCRsHqYndw+bjcOdxxowP2SzIxrhqYMox8tDnLVQ\nwtOpYnCtq7HrsCtHGU2YeWW/b0WhHS6+sCgD/z4Ei3jhPvXezVsbuBGjg1YG\nfWKQd62aaHsVs0KK7cwz0+NjZ6lBknifw2R43i4zj+Y9ePNwliuQ8w9oU3XE\nQgB0ZMrm5MyEEsl/QBPJJXGJFBkLRcSkcvHNOWN4Htj87hQv+CWFV+wddoW9\n2IHKDqLCdKEL58hFQ8eWVpHtwAa149ZWerPUr/WN1XA3FTdiOsTJ5s3NohV1\nBXTmLUiFuYDHbswlinKky9xrwU/tmTW1B143cfoVN4sZ9YUrBzmH/aa2uUOp\nUNeWrUeM9fe7QHDlFvplJwzagciCedmZ1DsDnczb0WfTokgZ1cU8VZhDYma6\nm2vIqeR7aHCNF4Pu8iNDxRxJzIQbbUH2IDOaldbmjpLEheYRwTrnE1nM8dAg\nJDv2\r\n=8ilO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/S6+MuYJZ/QJ/n9jpph1jt6uQDfwXWdy6p5JYnzMCwQIgZl1qI2jdZhmg23zKMdfE+puaCSwAJ1QKoY5Y9Ng2F7M="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.5-react-debug.0_1547004949603_0.1332281260893622"},"_hasShrinkwrap":false},"4.1.5-react-debug.1":{"name":"@storybook/addon-info","version":"4.1.5-react-debug.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.5-react-debug.1","@storybook/client-logger":"4.1.5-react-debug.1","@storybook/components":"4.1.5-react-debug.1","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"234686645735e91d11b5dc3a9d7d67e6cd602482","readmeFilename":"README.md","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","_id":"@storybook/addon-info@4.1.5-react-debug.1","dist":{"shasum":"a676e06f2797162f385ce184627cffe76b306ddb","integrity":"sha512-n/qdrudMbvkQ88BfwxZBiu8hjPEsWjG874DjceyKEchV28ebC2vGAHkTIoI4gnoH5+CokTc2WAd9GjSByqflMg==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.5-react-debug.1.tgz","fileCount":64,"unpackedSize":647767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNXotCRA9TVsSAnZWagAAufYQAJN3qbxp1KYOj5LBoOm5\nsdT4GdIH1Z056Sq6znBUE+CrmU8NtjGSrrycCP0+f9cF6GRQeKHx37Ab2Z46\nTS0sciGiRc8raCNqd1KlIvhaYJU1jDJ8+nv4jgdVkAcmVxsg5NOlgLLMXr6V\nUfbCaUHpwTCM7wfKomx+8O9/lZ+RzwoYxtKrm+7z4s92CWJudh1gnUdeaGtH\n789JOGRHNxizE5DIO65DQONkKVOhe/brMq6JkLLE9qjZ7UhTrg/sUAzoiqtr\n3J4FgWBsxoJOdRu023PiKL/vLdhAz9mHK6k79gJnlEeRjasbwDhwqPsN1Hne\nTBSzrq6+Pi0y/kE2uD3oNXSWBv6xOuXQwGLhVn+KNnqaKDik4vqmo8szu45z\nnUfVOgkee4vLxbz6HpKFni5lbEHlarxKvXytcm+frv3/GPRIfN7BJa536Fbc\nE1Yx1q3ieGpbKZG9RB6BSdFfDo+OIjpwWcus7n7iHg8Jr2FivzusyrWXY2my\nwwFuC984JZU9imIEvoHHcS/j0ObzkW0vJCmQNZbCsm7ylEscAsi2Rxfx9EMa\nSNX1P0cO2Lj8o5xurtrOvB2ejVG1DjcCMeNZktjBU8kYUzOifioGedvBFLYT\ncOspe2EefbsOAdT5kUD+Wl1t5iXWx9Ze0MgAkmhkPPWnUGxhKZMXL1AwNFNO\ni7jx\r\n=0fap\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAGYTtkKeOVf1k5UEmxSJUmPrIuDs2Y3+Egl0d2aIPyAiByrJ5qDD4Brllh/hYZec8pzUNb665YCScQOH117dFUCA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.5-react-debug.1_1547008556522_0.18528213798612447"},"_hasShrinkwrap":false},"4.1.5":{"name":"@storybook/addon-info","version":"4.1.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.5","@storybook/client-logger":"4.1.5","@storybook/components":"4.1.5","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6947deeabdb28ecf5272de29addfedbd316d4977","_id":"@storybook/addon-info@4.1.5","dist":{"shasum":"ed8bd46585df1630bd6a01bcee95726e424d660b","integrity":"sha512-Alh+aAtWYIsX4QyCPerN8q2SP0uysgr0JGkYI0jsNT42O3d+QjnNPLCxbWudyu6hWiIUHnFKHa2W0kJ+Fsxl4w==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.5.tgz","fileCount":64,"unpackedSize":647711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNZwyCRA9TVsSAnZWagAAQnMQAIoJrYuln/d/3MGAAeXc\nFM/ldngYP2Y4iABN8Xk6sLF2SrCIlJsDrhb81YQ7BjDmKTHCxaYMkAY2W/gU\nTHznQkwNioz5qR8zaBUgGffivtmvyJwER6T90C0v4DJP5Ye8+FEKFu2F2TK+\naDesPi9srWWAsDlU8iPhYg1bXnbi++lj+lpgcQ6jKlXq0C2LeCBsiaO1YwMw\nFaD217TS4PZe0TApeva623J9hQiyUj8YFKhHh71BQZjegY6kB6xSgy2y6k3/\n8pw4dHRmyuNQjQjNsgbKx0bmHHbagJ7QGyAX1y7VRG1+Ef/iH1ANnv0QEFmH\n2VwAu1lMNKIwMy2B9RNi0fCsFIoNOMm/BKHeeFnxx8zBNn+a8sbkqkHMaJVH\nTlf5NJ8mnj4DTyZnPenSbDhqcMeV6a8+59FnfJjIaLI7ZRWBXJqTfa5HDgnc\nTTQ65IjSX9KNky/JkxZI7WNim4bRvDdndGF+NS2uuHBd+zPtqiMJKM1d1Vgx\nKMULRunXltJEHi0UE/gXbJ+pXlURw/+TDaAw7yxFwulNbV8VMNqmM58alUn7\nbFn8qzLAE6AWuieMpyfk4RG9qFUwhFmkKsxA41ZAUDbvZlJqVCQQ/aOMLY1Y\nJWLmSUBhsQA1IlbUmwDX5t8DCTrYEEhBk+Ljmh39YZal6ssWfUuMBZxpWk37\ncXGY\r\n=0KN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDbqTANb+ACqIFmmQI0yG4iOCiiJWCEcRMtnw2VNTpZQIhAPVHmcCZuNIU/fHTdlol9OjpGMPYmTfgSaG5UR0z0oEK"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.5_1547017265899_0.4105562164953587"},"_hasShrinkwrap":false},"4.1.6":{"name":"@storybook/addon-info","version":"4.1.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.6","@storybook/client-logger":"4.1.6","@storybook/components":"4.1.6","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8901a06efce283e91af5aea9ac8c256fa0ac6b42","_id":"@storybook/addon-info@4.1.6","dist":{"shasum":"48479487cd13d674807b77dbd42500cd770c954f","integrity":"sha512-pZeBVFO7sRISeHQuliLy7FE5Y++MxeumJLJKkSSndcX73X2LOxe3zip5CYbL7O5Eb6m8hBqRlRKpifP2Dp4H5Q==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.6.tgz","fileCount":64,"unpackedSize":647711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNZ3/CRA9TVsSAnZWagAAEPYQAJ0ZtuL1QpQSOG7JGk+v\nll6yc66KEHFzDP+qrZoTAyUFQguujpxi5LkAF0hxTz+UzzuirTZYRPERVCF7\nJX2D9K/97b5+Q1sOenENxtkmHqxJ/5X4zFTyH1qglDizWQdRfUqa+yLhpRcE\nLX3D0Ep75XHmebkfy5w7reK/W5MoX9rBB16MMoem9zeBARoeeHEIZLR/VlNY\nwSWZr6SbNths80L1A3vM5tTzpiANqY8kc9qqOFX47DvN3T+YOO+eGT99TWF6\n5TJuv7JxWJRfp/nXttABbbq1oXwLV/AFm8tvA37zHr3xdbyqR6pHIxSwe6L8\nFHlIGUNxBGJwFuxAqpu9AY8dvBYdU2+KoqgScdS3M9/6tsdqqFoYFwe+LFBr\nSmBLy2aDGa57uVSlgswro/eIObIh7097pTmFqqpI4xVjQltHYUg8mN602DOW\nGMdOcvcm7oqtBPa5Nwe9EryAaPwCoKOc/8ZV8A8ktv/YEs5w+RLTEsUyAPSx\nyltappoUC5kmds0r/hqLeoqGsJNmrF2pkONLRoM3PCrCl4i9cTAVn4qbxBnu\nbM+YRe0c2K9UcV7aYPhjld4G6IaWVK0DbgGKe1VyCbMqaWmjDmFuLg1PAHzP\nkry3gGwGB7okGMvQPtH8oMGdSNcKAf7b5eXM0SwTiaMEyiJuahYrNS9EUgMY\nuhVC\r\n=1V1Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn2RUkDO0yTAeoi0dHkhzLu/ppbOEQgR0Szt6kQVdcYAIgVZYuEDOcn819HiJyL5amodjYyhxxiFJRp8Yo/CmzXyU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.6_1547017726461_0.0911029567952859"},"_hasShrinkwrap":false},"4.2.0-alpha.11":{"name":"@storybook/addon-info","version":"4.2.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.2.0-alpha.11","@storybook/client-logger":"4.2.0-alpha.11","@storybook/components":"4.2.0-alpha.11","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"edcb85f861a178dc47330c911ad658118659f8bc","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@4.2.0-alpha.11","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-8n93/kYtCH1R8u3YqujO0m/4SEE2z2IHd1YmMlATQsrwlBUvAFBP87vHVW3S1zwDc334cMXvEa89BAB7gtKOtQ==","shasum":"445f2b4f4bafe1524c652df151c860aa16e9e088","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.2.0-alpha.11.tgz","fileCount":64,"unpackedSize":763953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNcdvCRA9TVsSAnZWagAAK6YQAJFGdG6XMXj4zNCxIiHg\nYVMr68S19bRuSiyb2r6BrFoqBAdXunGZwbz+EJ3EraZlc5r5A7fs+8E7M8Vt\naoJDiqIo2+LlshXXispIXy8g2lDd4OZD2WjHvggWP8LZIx09KuV+Cqlw+vk8\n3HbHOUyjFi9GXNwQZRd6KBGV5L/6/TU5shqgrx/9JiZBDzsky5GQC31YnpRO\nTbk6O+mxxlYeWrG2DSNoLbiaxRRmpa2QxnomgshPIgH70tcHWtUHLaDBLXNm\nzTFQuHKdvOqFLvkpahfcCoh5T+0rgPjGVv1LLJHHxowLuU9R3SKbv9csv0Vi\nOHV5cscSkvXpwqM2gSbfQJH4QYRktEe2PqOE66pt7BRlp4YEdGKfUql39HWI\n28YfIAutF1w2ba48KUadsDF9/W65VoAolh5G/+3DgLkZpICww4Fgkp6Kvh25\n8fC0kXsGlvhPPJSUqFzmacuMScK/dFj+hPTI5ddKyjaQ8ukwzN6STtPVRYYk\nZQVt90AAXi0xZCbnf3DW6YYONNv1DXG2Qz8z9DuSYVahzbrgwCZNs9EycCHv\nvP/FKHp+9VUQXzknkoCmoL1BCRmhfuxgFs2qeU3/ZeJ9TlWd7RoyEab1C8Oc\nOLyzytGViBN5D+0pHRqzIwtqsheCtQZwQwVfZlTpymZNY0//UFOdi2fPtQCs\nPSGw\r\n=a3Py\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmy6gYbBhhpiThCdky4eiGYVRRwZTyjK8NgVYV4ZENSAiEAzhwr+AmetcwGooMLgpiRDWwGV9VuJCJWr39idl5p+34="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.2.0-alpha.11_1547028334453_0.998433329113892"},"_hasShrinkwrap":false},"5.0.0-debug.1":{"name":"@storybook/addon-info","version":"5.0.0-debug.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^10.0.5","@storybook/addons":"5.0.0-debug.1","@storybook/client-logger":"5.0.0-debug.1","@storybook/components":"5.0.0-debug.1","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"207598ad16237207116f771aa176321f998ccd6c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-debug.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-hekVcku3CEIUWw1C4L5E1mKlQGgLyhNsQHCI3mRTzF5xAEAblcWRPhTZehWQxPGwIWUzRJ8a4qU9VVf65rKdcA==","shasum":"33d0abf00e2597dc522b7b6c1e16a1d652b9b801","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-debug.1.tgz","fileCount":64,"unpackedSize":707342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNdJHCRA9TVsSAnZWagAAHMYP/3PnWrPflxv+ghlWlmWo\nORc0AXfwtICtg9KQV7BP7gRTJdjSGKlY1kbatkJMu2iheNOaLPeLelBMxPY7\nvAskFJZc97TntP+plhz2QCBpJ4fBpoUiPAv4y+Kl0lCRoZL+p/F16SeobnVH\nXcIrvgFFWFhsyGn7GvU04lEXvs68c1cXVg0QFEPigFr/ngVB1dmTZq4JoBI4\nNXVpuEdka0dcLb7ys+dERHRVz18bBQrqJ/7hPcZFPqJdMV+4y/6Xig5A0uzz\n+1YUOZeGFwHcoLPFRyyc1o/+XGuPLbfCg7H8WAwpJ6G7Su4riaaNSZvYnxcs\nC4JP3QcmyjQMDHRGfwjTtfKmGe5v8qLkvjzOwO6z67eaP8pNfUS/uv/nvJk5\n3r6mWAvb9HqAisfK4lkEPHod559ikhudIdJ6X8ulTApUYq6rE75BLTDpy5u2\n7LurxioAFmZ081Hzg0ZE6EqpXZehfy0PZtOrN99X46rSIubrqW+3EtA32yZV\n+muLq78XNdemHlV0GEnfgXwhy8xnHzR2bJIE1D92ojTHUHZjK5O5b7emmXhf\nyVhe7j/i2DSE4egr5HojmKB14ndN2NAjGW2LVHKwV4ErA4gxtIlSOQJKGH8v\nQ1K3rAru1tqEGca8KCE2BGlDP6DNun6T2u9rAVY4sar1Knfa5PK9E9Pdl5Bs\nA5PS\r\n=4P/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCEK3zBy+XMcctbJ94RWUo0lbqZw+s+yxGiG/gog1ZdwIgK5UhnmvYDdwAfF40phJUGJmjLrrDDf9i3yAGqBSRRVA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-debug.1_1547031110944_0.5041409180314265"},"_hasShrinkwrap":false},"5.0.0-debug.2":{"name":"@storybook/addon-info","version":"5.0.0-debug.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^10.0.5","@storybook/addons":"5.0.0-debug.2","@storybook/client-logger":"5.0.0-debug.2","@storybook/components":"5.0.0-debug.2","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7d7fcb32d55969d68fec225832168c354f6716e0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-debug.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-hfDCfoKfahOdR1nw2WQVVBZSGnudUTY5acDuMol1BnwhdY7hBv2vIApVw1f5CnqCZ+eumBd6IsbBMEfJFflpBw==","shasum":"cba5d483d15cb0e3e3e8970c7d4747a6422d742b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-debug.2.tgz","fileCount":64,"unpackedSize":716970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOXtBCRA9TVsSAnZWagAAT1QQAIUT+BMULBEtGS/0fQBL\nKoYNy3LBtoiheuDMo5fB/88dCUFzYYGzV6A1kIx5jbL2un/vFGq2OaRj5ek/\nUicL80ItNgBXO1o1Ya29oFTNhkPqib+sYfa6aVfdC38TC1S+7zJ6UYwHiJ8X\nngdtCjkv9pstzvh3O1jHmCDjROyrzZ9j+R7Ofr02Zht8UnYUOZmYJeZEwIOB\ni9D7X9odtXco9Yukw8Jygb9CgTqwrdB4l4xhKEYlCAELKNx8l1zYTMAslKFf\nQpiujMve7G/CS2R5KjPWLodqhCdWwK+qbSVaMo617H7i7F3lyOj46yq7c7kK\nE9EYQ9G319BQF3Pd78KQSalsYZlECxhR7I8hPeDumM4VaOAETzQNdti5Zujr\nek+4dvbs1/2KXBlBerHAcLtXoTxRA54SIDA1bd+UE1a1nYKR3wdDoagMRERZ\nGrBnvckGgFpDW1fGEqTa4F5g2ARRvMQf+QoNiCOeqP6hIfmVDKKGhpTv3XwS\nAsONegIzE9etPUplt6WsFCi9AA5Q8764UmyoqZQbyJ2hKZPa9O8wUl2O1hcO\nwKUpsGzSNembvH4kbE2Bmd+EFoNTOuLr0JMCer7SnbSyGMwN/ZwqKsnS0pKz\nlC1t0y6ISM7B9NaYhptul5s2DjCXQW6QH0Rrj6gbanOYtUvsH9Gf8/HF3KUd\nFc40\r\n=8ULx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/5o8c3XCbQ3tA5Q5Ggmr6ER2uLKmMiz6+XFu448XZSwIgN6QHN6dqCLlx1xA+E++JFkK0/yg3l8I6KccLVr5yaCE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-debug.2_1547270976017_0.48016326861170344"},"_hasShrinkwrap":false},"5.0.0-debug.3":{"name":"@storybook/addon-info","version":"5.0.0-debug.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^10.0.5","@storybook/addons":"5.0.0-debug.3","@storybook/client-logger":"5.0.0-debug.3","@storybook/components":"5.0.0-debug.3","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7e9669a0ba3a1049008708013e0e43ee6348e781","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-debug.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-qx6rjnEbwV/1V23DAaiAbwwA9Rn8dq1YSydIrWnmRJCM5MW03Xb6Al40nYQ0tJ4mgweR810vUk526xCc0usi0w==","shasum":"f49d0e02465e57e918565b5cbd459a6a9c67020a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-debug.3.tgz","fileCount":64,"unpackedSize":756056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOZbsCRA9TVsSAnZWagAAXtwP/3iSDtmogTTp6m1uWGCh\nPuD6/SeioBK3ZrIFlPeIjwX3ORP/lal6N7Sp/cJNTadvBjyA+tR+Z7zQnpJr\nJdIKxOIVD83+4hJpu6LEg5YOlVM3TW1rNlWERqU+E+pqoc4dljGbMrCblxj4\nTtQfkUmI/0Un6RSUvyGuT8jOEYuB3hW91V5VMuYq3lWgz6HoGVvgh6eftQTS\nLFNL1tGD9lHHPfUJAf0laoW3Bg6tZy+6/nFLFKUhho8aRslJxQQPWGI61Bjr\nQES9qLJlS29R1S4YvnfEfa6sjUMBt/eC7ySFZx4kVl4Cjc9WVDCnQwalkkdF\nojrjYYPZqrs+v1fQbDTeJ2lTuVyD9tJt5ZT20vHPeiGLNi3HvlNCOMMFynrX\nZNFkYAWqftaJzAev4nHZJHBfhJT7YhpR42uzopuoWIiV/X2GHbsvR6Nt4MC/\nLnLSKQi/FZtT7ebYYt8OPtFH/g1cUE3veTRvoakqj8SFisKihO5z9mYw4x2W\n+TMyJWwvzwnB+jlzo1CJ7EVZl4WDS2v3yBfZmKd/hFune+RO8CJ4Bf/Okxdw\nXlZeSJlsyQbSRP2OvUrQPFKUmRrYG5R3IShgY3KLL/K5kHVzYF5J+Gc/HdVV\nWB/bEf1PGmEVl+tcV5fBmd1KCHeczpoSp/LYdmORg1EceREFgp0aEYv6s8/b\n/LDE\r\n=Obli\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFv2VucihaaO9nBDFMW129q28CLu5JZ3+GT2vwUdspedAiEAjj7V/nvw9YKT0/yDGuDC9Ck7u6TL44lNUTqewvDmfKQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-debug.3_1547278060044_0.49312821847845223"},"_hasShrinkwrap":false},"5.0.0-alpha.0":{"name":"@storybook/addon-info","version":"5.0.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^10.0.5","@storybook/addons":"5.0.0-alpha.0","@storybook/client-logger":"5.0.0-alpha.0","@storybook/components":"5.0.0-alpha.0","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"340df64b9446d3c195ede1c1ba10a09810fe7479","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Mc1YHEULxO7JNbvNIT+JU6Xr3sbE6moNxJcqEoD/oZsUyOpaUrZS1+o2eqxQ78VRVvA+PzHLJmOBDuafXZRo4g==","shasum":"a23e01dfebf349d393767ea67156e03d93e40626","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.0.tgz","fileCount":64,"unpackedSize":756056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOuYxCRA9TVsSAnZWagAAoZQP/j41mqV/7KZAIh+lnPE+\nbJqpZ1WMwGzgHVhWKjm88fj1Bx1YQKVQX4SXYCyHP5CKgH1HEBgi+SdkSudi\nk5c0ym6ZRR60rHfmv05R1B9fchU3yio8WabbB7Mbkxsnhk5Ez4hnLQIhEEBQ\nv35zNoCRr3epyT0MyACYTam4m/SdZot4bysJS0KdlZTN2gziddyby+Mc1bNg\n4NHW8F7dPjJgZbLDynv/De9drlr8TamumbuTAMA45YEraebXfpfqXl5wcAl3\nNNET37btP/smNQwSe9nhq4Ag+F8C2xwDG4NhPIRq/hCcy1FwxE47OlO12lSd\n9wC8frUk/zrn+QiflG0IeLAxADt7FvdW/m7ruMPI3+5miQSaADVDJWWcg/3N\n+zPDyzcUTHCB482ztGYkSVzPSH+Ve8aVzm9BZOoqpc7gQCf968fxHUdi+mX/\nrt55yTLGePhufWvrRmt9i2ShoaJlKDv88wcfbB9Mdx2AZve4uWw/ppYv27Vy\nbN6dPGdfDFZYBwGjIuJ+YO979RUMwJzoCSTFyEGkTKOg2dU5Nohkn0LI9LNe\njnN87QFc+StVeWKXxcJqlRCj3ZWpv/LolStsrbVQVpQFIJub0idu+j/4mIc0\nRXnlmzUYAbuLvpDXjemIZoY4cu51xFr4R2010hSe3hwAYfvM17dKnBJuAO2h\nc0nf\r\n=vuOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLkwjb81UDhhuTWtxO9GciC9o7WU3OTUXyaZU2BEPC9AiAhj3TnuD3goGznEdqEO03aB8U885VOB+6d42BtQ6SxVw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.0_1547363888846_0.5495316245038206"},"_hasShrinkwrap":false},"5.0.0-alpha.1":{"name":"@storybook/addon-info","version":"5.0.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@emotion/styled":"^10.0.5","@storybook/addons":"5.0.0-alpha.1","@storybook/client-logger":"5.0.0-alpha.1","@storybook/components":"5.0.0-alpha.1","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"70e528348e074ddee0d9700bffa7794fe5b025a8","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-hA2hTiNGVOSWg0NqRVMMSBrCBxPZOcZLrs88drbyRngBZXdS6/YeFdyKpAuuo0+SpoomC4qDVB8fFxPsGp6K6w==","shasum":"568ec137aed60db181c3eced3812fe74671dda36","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.1.tgz","fileCount":64,"unpackedSize":756056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPK75CRA9TVsSAnZWagAAUQ4P/0Lhe+cd/KYG71mefqhV\nqWVAsaI/u5FdDp4VCmFVyaJ0br4X03TZKrohoqNYdbM3H61KsYaJWcT2Wqet\nQwqOo+ddkJ0qTLE3ctgNj3KosOkPDsohuHE65VQxgIm6E11tqrGOAWYx4Wfr\nHcXhu69ZxofsCU55JWahPOyl/L9R5Y0GdUkzCVk+BSvk5YlZEJXQvv5PbgUt\nIU2HC6aLnFXC6s7ttjiIQa9pEwblY6diHLg+6njiOBxarfMkM4FDBg1Dk73T\nX7/2fac4WwqylwgWmQzXdn3KBrbdhpR/vRksjyerzVXQGrNNcm7jsZQXAwZF\nlE/aymSR5X8QjGLypGEXVz2Twc9r3VQSyHAJHYtFvZ7a4YQ/H3XZjMhSGAu0\nG5hLgNCuCSFzJ9q5NC7AKQ0qaCFLlcelyi7OiZ7Y7/uiW2mnZEpTQbrXGL5q\n9AKvR5e1oGE26Ak6PZ198LN3jheRWKD7cKmopo6NQQsJq+TPbP10LtbV7i59\nAqJJPmvpKdOPWx3KaVVxkXrlvHl6Ml/be9odHwbepkVWEKM+JEiKfW+BVL27\npzDCEumi/0sqf9v3HSdqG54D2emah0fdjVBlHUIrqk4aSrDgbxysvmQBnUcS\nMsqRwkKU92V8YgiuBCQJgfTesW6+JE/8Ae6AnjdEc94kk6krloeaPSaX5vJL\nooU1\r\n=XbY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjrG+mj0Z7W007fxgO+nsM8Yutz26P+S9D1grzOD8HQQIhAOAqba8zADz3ngYuyJMKPQtp7e0qffg5u1KBd8WMVH34"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.1_1547480824613_0.15415517577140125"},"_hasShrinkwrap":false},"5.0.0-alpha.2":{"name":"@storybook/addon-info","version":"5.0.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.2","@storybook/client-logger":"5.0.0-alpha.2","@storybook/components":"5.0.0-alpha.2","@storybook/theming":"5.0.0-alpha.2","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"523030f33e64999a314b6590d6b00b9ba937468c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-6wIg/T9A+MMMeCBjBUqkbF7kd9crE9YSlHPgxpHcqQs0zavd6VbHaLy6hBO+n6dmHyS5Zi+1v1FHhMcrHS2zyg==","shasum":"dbe47435cbf1317a8a5b0af9101283719ba740e2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.2.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPp1KCRA9TVsSAnZWagAAuB4QAKKLOmBAY0M9b4kq7f49\nI9LoOApHKniQiqJYPsJbuWLu3q1hhNRYvqidJ1Xk7XLjPsD45YS/VkRLhNaC\nY+fdebk9t8bAQRDHsbP3Kc0f6KHxoM6ylSFhf/8vLm7U7iZGJcFTjGzHdq9X\nj49UrWcUXqpyy4aOt7jDPPGSFMCYxFbU6F5Rfq6h/KOKbwqCstpCdgCfJPq+\neyuQ1pLSmy7sAfg3P0Rtd673DTeAdGpYKGoSUbW+AwZM1utS+Z6pn5Fog2NJ\nHqVke+D3arDjZnrHzl69uIlu2R+fV1yn6HUdPEnYrKgEC1U/tB038vlbNGfs\ndbjnkr61U8szCcvdAFYh1FgIu0yTX+/1G1z8Ui6u6x8Z7a5M+6aDdpnbgLWJ\nbmgyTPg0Z6DWK0EWAXA7rZN50MctZebr2ZUnobbmYsooLcERQJ8E/id7U7AS\nEa8ATFPfPJRy0jHOIZ5ezOXivcOfscVtSwqSe/f1NstIETR0ylIRW5+vZ8cy\nN1P9oA4/FeIcA1VVTwV2V5Wpy7wnrIr+98Yz21Ft5cOZoMvT/MYTKzc0zzqd\nQeqY5rdM+S4yKM3h/agtTPQOhScGgBNeipFexrUo5ygg0baSdxqQRztqqDd/\np9SCXd3TZfyzHjoDCk6/A9ym8+X2wtnsHgdsWwyovqT/ieWgrEKQWJqlctwA\nhpG/\r\n=r8Vw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQPh5ObPrk3BnD0fFtztTcqP/cxeTWLCaXNvq3AozvVgIgfF5s3H+MzvQEnR+7P1y4Rum0vtLbniBEyvlBnAnybtM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.2_1547607370174_0.5232681453263388"},"_hasShrinkwrap":false},"5.0.0-alpha.3":{"name":"@storybook/addon-info","version":"5.0.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.3","@storybook/client-logger":"5.0.0-alpha.3","@storybook/components":"5.0.0-alpha.3","@storybook/theming":"5.0.0-alpha.3","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a1e432fc7a70af5136dd14e3b16f6de0b6cc94dc","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Mgt3/EdqnclcHNHdHf98SuWJ9GEb/x7xLgsngUFTellvcXka6lZuOKELXd2ErYrRRnYkNzu2qAd3o7SEFt/+Sw==","shasum":"65ab12d7be2b5bcd96742365ac7851f5947c5a50","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.3.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPrAjCRA9TVsSAnZWagAAt+MP/3zAb2EOAQ05U93BSmvm\nekGtCsqnj/xvnoqaE+kWnV4q6WgoS/noSES+rBT97pWS79yRXLLe7G93hhiX\nnDgU7zTICE4UMNda5mv3gHSPpr3WDDq7iCxN8rvPWyMCz47V4zMNnpN1Y2O1\nPunZmgyqxIOduSnrlrLli5Feqqpz2Snyssin8YXHFz0jPkkTHtPgCeUkeN0m\ntZOMgTKXJwrzSwQI0OmP3QVsxlbsEsZNX6IOkvZmZaLRstZi0vJ0puMw731c\nnMU1sSjhOHFkN4hu3cB89DrcPEsEJ61eGb3sc0FghYhgBtTdLonFscWzcazn\nr7CCAOunGcFjgGXhOT6QzUuT24K5jQzCepqF/EfUK9PUOA5y8IcZXRAuoU6g\noT1GHHHvre0T+4HUIV4JaU9i99X+mqikxdq2lOcMxwlZjrmesCZ58dmt+ZCs\n+geiibVRJtqmnIty6e9lCAtc5w2oagrtOadyydUy/JdDmnkFofUMOwz5rxBr\nHjhABHFsnmsPwiiQicdTN3OcDBo4WLxjQDnJOasx1ebATEabTh+DwJNre8H7\nUwZnfPo/HNhhz9jwif774Fe96Tbv097BrUrv0HUFBgvry3+VpWbKn5k6PI6v\njFNTapfmFqw/kvhI/Z0YzJYS6u/95gz0h2bn5uYQhUwkqJ/tnKZ91q7wdvC6\niGVW\r\n=qbbj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBaCeTFIfja4aD9DXtN+yGDm4DmKzZ7LXIAVoRrK1PjAiEAxRbCL5ycnD5jP/ZUMt5A3o6huzP7B+X9vYBP6AcmwTs="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.3_1547612194770_0.11523333733573904"},"_hasShrinkwrap":false},"5.0.0-alpha.4":{"name":"@storybook/addon-info","version":"5.0.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.4","@storybook/client-logger":"5.0.0-alpha.4","@storybook/components":"5.0.0-alpha.4","@storybook/theming":"5.0.0-alpha.4","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8eb726c746cd82ed1d7d19989bfa6b4d5a7b2c93","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-XfFprHgrBdGPBM25aI1vSzKjxsggWQiISqMF2vgZiXVi9cCglJwnv1B2fVX+nc2ZQ1M4T5YxcHg/qwejTOq5AA==","shasum":"ff17b497cda82ad6bc6f06722bafdfb559aef5a4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.4.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP2WWCRA9TVsSAnZWagAAdnAP/0mSoXdJZ179bw7frPdp\nbkJA7ZWKsXq9LQYItyiN87yEU67fh9mwoZZr9yaSMSbiQA18ntlTetYUWDV+\nfIindSO5JXDUOrPo0STAD6RsSpd3un0yYt1V/zfNcSZblk71x1eJyPrVtR28\nGuwCUil0ibqO3OBT6swyPwjU9+esH104wJIT4AQz2xBnXBVw3ERUCTntc4sJ\n6+bemSRoqfgLvtlXlCfghGFaAz502vLns4+xeKp2DNAcVh9V8g68Sf4f/GUr\nSg6hle8wkwahOGzlCAfOmDvFkW2w0QgFSsCJp3TSBswmxOBgHkazHR59vzd3\nPNKFesCdL39kZn1UEo7wqABZvA5zj9A1OVvbeRW/YPaUoMxpY3+sEWtdJxQ1\nSsAFlwDIpSpkJB2CaWRk5QOUTD12+B273ew/1dfSzaIOjULUKcr5NSKnxJza\nTEhSvJyzNGaDdekmqDRj6GxW6E/3yx15AOHv+z7Dy+7GMDm9QuiRG7v+xDlp\nR3knEbkiu6MAMzGR2QdXh7RtOpw/JUOL+lD3gC9iXZubvU3IbOwR/wYhiE4w\nOCyLCsyDUiGFy+NAAz9+B2r0ik6JD7JO/inlMTHpZ3fNpJQtZI7TUugC8OQb\noydIwOA9pa1cgQ5WRfDZSw7ddLhg12xndmpM3wiWyzk+DGhwGNA2OBDsyS8r\n7dqJ\r\n=15yr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMCDY4Rj09W3+whOzBgvb0LoWBsXJznLHcoN9Y0ESe9AiEA+56oBxXPfID5zS1u2U2KXatjaMoFITwQ3GVmODWvcnk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.4_1547658646243_0.7164951731489184"},"_hasShrinkwrap":false},"5.0.0-alpha.5":{"name":"@storybook/addon-info","version":"5.0.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.5","@storybook/client-logger":"5.0.0-alpha.5","@storybook/components":"5.0.0-alpha.5","@storybook/theming":"5.0.0-alpha.5","core-js":"^2.6.1","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2176cc520f41e8af86ad9c37370e0fc221f0d4cb","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.5","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-23tPCKV6kb2ei/TaniodRS8DAhyZn4DpJH8VDOovXnoIDojtg1Ot7AWVezYFms6b39W4OnC1RWZMNHTzppbH8Q==","shasum":"4b0ca32445ce4cf28077596d187922aa24d76c13","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.5.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQED4CRA9TVsSAnZWagAA19QP/35qJEoyI29dWTNwcaLg\noECvoeUFX3qYZIWouoAsbvWHIl0GSn874dDboNXaEffq8upPZlptS8WY4E9u\nvLDyGdUD9WOFAbT4i1cmkGKQ5Veg3VISgerdSMboJ3kqKg89ve4fENvm3KU8\nFGwvQPRK7B0d7V+wBh7nky2aDXKjGU3Cx20OUdioc3mca9ZXirxMlIkCr6Fm\nAbSc8f1O3jqsOGDmcXHqMX5ZKi+sGT6Tr8ff8nkN1FyrNOqjvvMrqMoSiR/W\nhrwErl1OQMJoEHT2jMdAIzgoXC+N0lJA/nb1IDCAy/L9GYZ7/fxw5KnF4OQq\nevSCsp21P/0GEGggbVZ0eCEbv/MH0O53iIPlQnWbgB98+JvGvrDeI53c8jTz\nVIydXoOOizOoEZqc5XRgkXkYOmyvSqBUqHG7v1yNQ1XVvOhTqeeUpWPaMXYh\nEC61C84HrX32jlcP9aHdhzEO+iRvROWlCxIVdJtNNPcpe+TWUKqI9UYR0b46\nlhYLlctruI0SQMTy/WyTbH8FABPU1SwXKNmEY+B1UycJpDOmAdnsznl1VM9s\nMGy9TpzrBKzfntxWim9uFglk3b8w3KexT7Nh/Hi5sDa2Bbo61Afo0YPKij+Y\nQX8xjokOPfTGgOY8bR7bNgmouEsDRc3SOTiVX6uQLYA4H8Jy6e6yng9TeX03\nIf8i\r\n=LCAs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcVadVLnjK71yKclaD2CUlJSeu5J5UaT5pYwS7zWcZ5AiEA2AmGKVQpazD/VVcARhc4ZZPBxI1jhg9PfKJmQGkNdM8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.5_1547714807880_0.43420619186104137"},"_hasShrinkwrap":false},"4.1.7":{"name":"@storybook/addon-info","version":"4.1.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.7","@storybook/client-logger":"4.1.7","@storybook/components":"4.1.7","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2dd7af6e33d32b53df97ac172bf5fcf4e8609e02","_id":"@storybook/addon-info@4.1.7","dist":{"shasum":"14bc9b97ea611e472363465902d9414020a24e2f","integrity":"sha512-Yc8Zb66hE1vOQ39b16gXbkrFSXNhJDk0eI7mHglbXFuW1lsXMKi7EhXWiuYSKF1g92KTlHumSjWnYrUmGfiLXQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.7.tgz","fileCount":64,"unpackedSize":647711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQI5CCRA9TVsSAnZWagAAeDUP/2oTqEp7iGPYg4cuMk6W\nYJRhd74Ogv3GP+jIKuPboJarcEonWWlyKRvksWABeVTMVjh9FyRWzmSiFG96\nY2zptuu4FSWyyqFxeeBnf74cPjiBFGGFZhb5qXPx1EGQWO/7yD86T87aeo1b\n+gmmSk+BEA4etTTQa2TxjeBj+I70ZP3PCsjMSJf7jo5G0mLGnyd9ofP9ZH7C\n0o+3UgdaWGyvSN33/lZSGm2GI+ru+Y3ADjdXniFbWrIWnU8fGH+LB3Y0O/Kl\n1Hh9i8L9OP80m1nWF5Y2K9sjde36k5hdi/rXBzySpDXUcg1o5OVMINZzz//r\ni60UwhBaI6L+oNzvWkbCQBIig49ErGKvesNQshudZNcE0sbwNJ7KeyQToFdK\nWMoseebe35XkEMNdqtd8DmneVBHwLwDv0C5aQl/DedZbfFcQTEWIPoVpHV2l\n2L3eyeF8WEYHQ/q6sFApDpVrF5LG8mlvhF4sslH+jHCCpjDtOYcbBI9pXrg8\nI4OZUOceoemge+mtzV6KvGAXXjrqfLf6tq8V5+2n+R6lOYX76PW/y0sb42Jg\n7AdJuJJUyaGhC4u9K5b3jsXqwohHbOnae3w9TLQus6lwn+thlYhP26Kl9xrn\n93yMnDWN99zCHV0ozmO9DSFHm+h3Z/RAmQxyr8vXe49753lGsXLfR1pKwdbr\n43/h\r\n=13ot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGFFVAg+nHhhnK2lIxYzxvHNT4NvFhc9o81LmvQ0TPsQIhANX7rvrv73mt1jaxffnaUKlHJWA9h5IMD+SfJz7kH4/q"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.7_1547734593879_0.8233746443957335"},"_hasShrinkwrap":false},"5.0.0-alpha.6":{"name":"@storybook/addon-info","version":"5.0.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.6","@storybook/client-logger":"5.0.0-alpha.6","@storybook/components":"5.0.0-alpha.6","@storybook/theming":"5.0.0-alpha.6","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2d644bc527d066e70a5c42016a1cd8a5ca7c9c11","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.6","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-HA1HswRlE6+JmrUH9yFcR3vd8Ix66zSVwp6oek+uJjWwzk/bg62f+3TdEVjRwOGrA7St/h1X47+L6smKifqzfg==","shasum":"e9dde18e50bc06d67fecb18b3358dc6fc7df532c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.6.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQfnyCRA9TVsSAnZWagAAGjUP/0bsWmyjwN+WYqcEguIH\nlFHpbfeG9fxC27k7MDdlcia4C05XLnqKWfMPkg/7wAxvGl007lylDSnEur4/\nG0QwcRvhCnM8y0w/zPN/S5qu5nDcBjNs/lTK5doVhplVTG2YoJ5QlVOPWCH5\ncO/p4CKfelNev1fljYCms4mc4iK4bRnfKLCXN2yOxLZ6e48ObX0HPKsK5xHY\n20gnlsDHJqtXQDre/GR1b59cqHhNu5GvAhoVNqD0RmjV+AdIBOAgbi66Sw7g\n9iwDqGMoMlPFhrfvh4QygCBzc56/p6zsOQCOGO0YmunUo//eHBwg5ivvAnv9\nIPm5hBTn6sONWB3V7tquQrjcyoyPBQfkQM9114cmLEM5HdFrFK8WubDJk19u\npKaiTPVQZlL3BG/CWhxGI1zT0ApPQHZFdjzmxF5D5vgq6fZuzVl9aHJ2pdgJ\ny7UOmUHIwg2psWw9htUj0TeXSfYTniXuEBwMnDEKgGIz0utoVsFYp+/0QVUi\nYiNS4SYv7ktR530+Jb7QKurKW9aiV8Ok/dGMXNysJkFYsgkgeOn0aNhqWNim\nLXYDrSLiAybGWdNWLGhRlgvtBaPha4FNlpRzr42fJmz5UcQF3OMvto3BSHFn\nBOlb6xHIoCKrmV9XEAAStbCDtmshZYivOrIVkuAHIC4YoSBKdEu2oe3AY5Q6\nnrm9\r\n=XQnl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBsBXSxDG42dqkbJkgYqvjA+liYcW4G3e7Xc+vOyqZdAiEAqd9y1nAgiN4w/xM6R3w3qxLISJDaxXuN7xV2zITaQLY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.6_1547827698325_0.8433997654295888"},"_hasShrinkwrap":false},"5.0.0-alpha.7":{"name":"@storybook/addon-info","version":"5.0.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.7","@storybook/client-logger":"5.0.0-alpha.7","@storybook/components":"5.0.0-alpha.7","@storybook/theming":"5.0.0-alpha.7","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d262ca75a0459c1e0dbd61a945345cb68eb622ce","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.7","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-JAYgy7rJLi8kpEcufPRa0qCtF57xPjIW+9kxsyVbA9Loybp7qU00TWFfdVas4H8Kk/aHsBHmEQBhnZ5F47SY/A==","shasum":"d6f84742d4ee9facc7413f8e75ddd80605d01a0b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.7.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRDYeCRA9TVsSAnZWagAAOj0P/00KWgl1i6qDpozMF4VN\ngD2EeLas3SiDGALaAfxWen0qiCf7k5UDkIi9bXB6N7Kpzum17sD2x1wgdzLN\n0eG/+f7B0iJggyPjBdvFKU57hahCHKlN2T9Fj3ey3OKZ1VnB4HLb832cq32s\n/FB4GnLB+FtQAK0A9ZXwK65I+DKsMMuESq742Wxm3btaGvk8EMBUQn6z/VcN\nxbympvP5TRdWO+7WN7glvQV4MfeDzKUxi2xDhNjwNXSKAvSyaZ2zqKXSvKX0\nwXMLwNYT5NjFxdGALMsb3jbrAZdFerULDmFniSRQQxDQvDHPN83b/P7zFF13\njjKDUpq8dTJQ1aXfh7JhxHVVMOFGNDvA6L5fnPP4dOWtbIRVYDODpdfvgWXw\n7IEDy7U67OP9ZloFQzaFKFJwHibcFrlNojkJSVmir/xhBBSyUckNi+9Vi6pH\nLLab//TZ6HEW6Qmk6Untnh5fTa/t3DCchV27PEORdX6e6yGZx2Q2ppForjJU\nE/Jozb2Ft/+ACHjF/1IeAMBzsMfdoJ4MoPQGbHb3Wt4w1hfhX7J93hNh9u+O\nR23bCAO1LHjuBy2XG9d06B/09XdVeM9Y/PCPysvudgmEhQlAYfyjIoezrSXa\npcSfo+05md4LjmbpBtv2dvRUFWj9MWm4ZsGTCuLaPfj1KhJDJSgqb5G1m9Dq\n8jVm\r\n=lw/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQo9eT+javjWBtVrSQbxeRMmoJYDtrmacGXnEYLC/V+gIhALyl/xkd2AmDjzR4tbKBfd6Ytel0xoY8RE0NVk717Zwx"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.7_1547974173777_0.7871143055957825"},"_hasShrinkwrap":false},"5.0.0-alpha.8":{"name":"@storybook/addon-info","version":"5.0.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.8","@storybook/client-logger":"5.0.0-alpha.8","@storybook/components":"5.0.0-alpha.8","@storybook/theming":"5.0.0-alpha.8","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"80cb13b705105b80c53dd2966be738c54c7d5fe1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.8","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.6/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ho6QJDnDe3RXSGDJa+Pk8tLSC3yzWsCwdElNtjVg/XsyDxSLUyGpGFalYfozoha4zxDK55jywRl5sSS8Pr/skA==","shasum":"c4d67c4b22cd2a0cb04513a1b062ddf453a95d05","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.8.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRt7MCRA9TVsSAnZWagAAjZEP/A/VJV/kdQOEiu9RXZrO\nkq3EkgEB3jEI6p1ntYcyN7XiNslnirIZKe/sTUdEaMq4DxSuSlDVrZWt3qY2\nbV+fucx0P4Kcc+wFgRe4hBMDfoZe41LbRPT5YxpYZyxVgp3Ce6ffPwe1ybcz\nxX456AvniJsgntjhnGGp/XhW4ysvFmXSqUE/annyLWvcZ/jE0apeeMY01Xj/\nv2T2xLqbaUP3xGzbdRspRU1jyInykdyhqc79BpnCLTMGH1K+rsFZD+gtueCa\ngGNehqqHZpN/g1rcfbKicCGtssRlXWr7VyzYg29/4aUQB3KN0XFiGeUgv3bu\nsULA3Ls+UTu6SfInsae5XMy5xqBVfsGvOtReymNaavRWSc2zgJIQzRQyjav7\nAAA+oa509B/rODXj29tzFgbfYHI7grR78NgtIibVb96GqHKXh6OaWEj2XupQ\nFuViHob3q1ZE4P00Xax3roIJgmR2jTKmO+s2UIWyjfSmRBj96AE/M1fnDx3a\nO+frDkKtTf08Kq4vuUBeWJ7YxiNI7nvVOm/ZjJvbijVscjWfo2aI3+Groyqn\n5MkG8Ddd01gEKYQ7XKdNokUYi+A3b4SAXco8bbzJTqdY5btChHb9hOSMmj7B\n2fLYf+nxXFccbN0MfZUZCxNY5b3Hnmlso2rLXRrT5rQmZE6PLcWZm6qm4fl1\ntRN+\r\n=m/TY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBy5S2D6PkdydpiEoh8JxTf5agps3SCT4A5bz6vQQo8+AiB7ZWB3l861+YMJ1rTGxa7Wh8t1MiTa2zpm02ZpVHvTsw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.8_1548148427627_0.3377084051176986"},"_hasShrinkwrap":false},"4.1.8":{"name":"@storybook/addon-info","version":"4.1.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.8","@storybook/client-logger":"4.1.8","@storybook/components":"4.1.8","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b9df11de752f31c0cf49d28f7a771e841d670a65","_id":"@storybook/addon-info@4.1.8","dist":{"shasum":"8bcd65081e2f427aa3a395abd9f2c1c7e7f812f5","integrity":"sha512-o2EQZ/jZEBCW+GzxSRipbXJITswm/AqXiTK9jQ+k94ceb2FZ+D874466sRGQ+YpwxZRi6fgvRi5XA3+S7vXVXA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.8.tgz","fileCount":64,"unpackedSize":647711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSEKQCRA9TVsSAnZWagAA0vUQAImHflXZO00HFPupe+Za\nDH16oTN/Ljgxu5TRQA0pGOvSjQHOdAbdhFUBupngCESR9lKo6H13T8VUe2tk\ncx9+OybdcUg9IEWenS7dFZ4Y0Um5hlW9UE32/a8KgmJsadaOCn/6cURTNiNj\ntx3QrDiIT4R+EO+I5yQGcEJmROM470mqG0mIQ1Gvb9uQTR578EdrtZj03M6o\nwrWkLaeF6sVAOWVt+TL6I52rKhJqlmnarMFksZWKOCcyUVmYuV44kmXkm1FX\nLreofHcZ4QOWNrKjaFaZPzqktTi5U7XkSfsD8ZLBUhI65f2oOjyqxWyaD9R/\nurUU6dFbLEM+80ks2o41Bu4KFovIcdtc485wNFBnpkeEvGLPAHrtFj41cZXt\ndGrTP1epxbefzalMLyC683GVO4mQs9Ey6s+0pSgmt9KcoKGYxhblD7SLXG6P\n0gZHsYwUm4t8njzdFg4u7ddLob6GvWzQ+qof9IS3JqVpXErhbBd5dqK+7eG0\nqQfGPGJCm0rxjS5orDNMNZfWezpVusO7N1AC0tCOsu/5z2egHs8mW6Czr3PF\n9NAnN8pq3swELolU4CHgIFbRVQwIEEPBs/2K2FQdBHlUeyAifpzaJe9dk7uw\naWKewLZ4tcOaD49NOctz3q2YOuPG8G7/XSx0PAXoIzOn9dq44qfL+yhSTVjP\n7FNx\r\n=3J0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChGYRoxPto8L3Ekq1+wG3+d3AR6JovSeatICKAzzt9IwIhAN1C5AqEmpzgl91UIvCx88awxdt028ApxMBrsqRtgnzU"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.8_1548239504005_0.31605682558538883"},"_hasShrinkwrap":false},"4.1.9":{"name":"@storybook/addon-info","version":"4.1.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.9","@storybook/client-logger":"4.1.9","@storybook/components":"4.1.9","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9d5e7e96725415e06585383faf4d70ccc94a3ebf","_id":"@storybook/addon-info@4.1.9","dist":{"shasum":"287dbfa7de017e54dbc84e89029fcd9f7e8503ee","integrity":"sha512-9D0CkuoerSqy8XDRZDPIQ6mEI0GgfVYwhYrz6a0oVnxWY+opRxYNKZrnONFVf+B51JImGR+vdMO3KmX32d1EHQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.9.tgz","fileCount":64,"unpackedSize":647711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSEc1CRA9TVsSAnZWagAAiMwQAJP8iUqO30EThUGm67c+\nqcmk+r4rz6sSxBsKEr+TZLLJqK1d7ks0Hxg4MtotT13iXacGDgG4bl1vmZjp\noc4QkEDpa4m6klV667dDB3D1s3p1YLiRazFmYIc3VnZ+cTKSHGiyNGNIQ73x\npwvb1ZVZLWJCv933tSJscclryCEbX+AzD3oVmNuuCfb8HJTRhVkVyK3jOU89\nZ91I8hKCItdPBJ5BF2F2Xxb4ueB/3FJqwJETLJZVAOeHa+sU8M9zmVIvLSuY\nrLQpZdVxYe8seo/S/mdeBJ4nyaYtGV1On9ArcK6Js2CZELlegQIYRrb+IJfC\nUskcOXOPwwubQdbkjwZ0ec1EVgKMlI3WEwIxxGj2CfN0YvJgeqTalNaJbTly\nQ8h0UUWimQQ9h1z8MrLXmqY1Na4usy11MDl3MdGcxQ2PzjBFDU2HHJF5RPLO\nnnqE0toojvujpjJAYSfX78bJlvRCl98My5p2z2FGL47N1+dYrl15XgAYF3Zh\nz1wjTvZ2TrBFHDJuWVg0Xs0YadFzLk9dBTsg6AFlP6t1u+qt62NKpmc5+dgk\nW64g9iBd9EatUyixzt2dT0DQ0NH3oZ0cecpYfMf3pZHfX67H455chw0ic9+U\nrSxbyF1UPfqrf+MMQiEsHpHGsczqmhqAegob8pIouYBgEwmF7fHNivMILB8s\nB/XD\r\n=mANm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRu1zzmEDoNMDx6KJRX3lt+ldcJaQSR16pe8LcS0q8YAiEAvd9rRaCOycAbUo5WBEuPvSgXaVTm4fL8J1cqeHaPWvw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.9_1548240692768_0.24875157421610372"},"_hasShrinkwrap":false},"5.0.0-alpha.9":{"name":"@storybook/addon-info","version":"5.0.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.9","@storybook/client-logger":"5.0.0-alpha.9","@storybook/components":"5.0.0-alpha.9","@storybook/theming":"5.0.0-alpha.9","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"dadd88fdecd88a87aadf528f243ae4df3e835324","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.9","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.6/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-9IkLPGUpHTfvb4VbUM1zLflDepFZRomSn/4oNlmdwb639gdVDoqrsDb1nARcTKrRzsQhth15DXpIbLrZWwwNEQ==","shasum":"0ca533a18dda588939715c7326b4d8e7ec686ce7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.9.tgz","fileCount":64,"unpackedSize":756028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSG8nCRA9TVsSAnZWagAAwYIP/12S7uCohrAnuTE2+NVV\nVHDHQ98X0tKbQGpg8BrvxQK+9YUAjidn9eRl7FzkkYm4Qgu5zsyskZU9YrLB\nbSgcLCOarp3L7GpkKH0QT+CHv410vuYLREL6R14UDNs3RR0OPDOKcmNMRC18\n7uCoFY/SfjCKzlrrL/Wu/SuXR8FeCot3QQ1wHF/AxgRoBmBVxpOUMn0YAngV\nAEJusxE+DUqNQU7yQZOWoeSISsfhdbnfTRtE6iPPzlW0DfCtKuEzujVwDsoC\nrNoSiB0fNPYjTR0DfMAVzS1vuwQdibyJsKyN3fbPD0/wlYTXk/3Tnn2vti3P\nMp/wK+rDH9K0xLjnEOB0Y3rkOFqfrClmRaDvR09KmRb6yLMKCv6ow7qjEWVx\nMpiYoAPqQvBgYDe5jPfr8skWTPZlM+v/h8sxy1gr3OoAsLSn5GPyasf52/Zl\nFjAjVvjtEFoBWKDMf8ZhWXbuTw42D1c2bSifBsQDZ1k7STjG23EyQ5HTu/3t\nGlDLq+03g1KhkDOrd6fu7eNbwMsAPwDgbCJkz/TTTavSMZkcsdY7yLmCtptU\nWgtrS9PzwtjkuW7a/n33/uxWsmGAJzBYBC/fg6TnAzx4QUEn8yWg2SQd/RgO\nEvbOUFFv1XOZV88/TdzRApeIKlg4c3RwqINr6IfoBvh+PiCVmx9OMgtxjkqw\ntkrA\r\n=6e/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3wAmQ4tfVesNIPMfIlroPyZiiEBXyELTglhywkFYLuAiAw2isjGLfqcdiwIAQlhKKkH2xToDs1wVXOmlPUIVcx8g=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.9_1548250919259_0.5694831439638013"},"_hasShrinkwrap":false},"4.1.10":{"name":"@storybook/addon-info","version":"4.1.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.10","@storybook/client-logger":"4.1.10","@storybook/components":"4.1.10","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5860821b9deeba32f894f6483de72455597c4d79","_id":"@storybook/addon-info@4.1.10","dist":{"shasum":"0b9819a5970c55d0eef1545cd322f635812ec999","integrity":"sha512-YvFL7zU6IUrAuTGNF9ZeKf+Jl0SSnHN35L5eIsd1KEfbvx9bPR32oza0mgkD2YL1YhJoMA6UXONQz3i9/6QnrQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.10.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSc2VCRA9TVsSAnZWagAAmxsQAI19d0vJw77j/Q5tBJEk\n7mx5lQDf1Ary5KyqAbt4Po84QqZz7am6qBYz9GcL4P0vOUzTqKdyPhJar7Si\nP88Gz36ikHZxNeF9FTVRtXmWCVsfVR+bAfQmREAFcnis9dpAl66oRMMdFETG\n6VvXWiicgLbptPbnMmcNNswruRhUUeIDtJGUJIIhcD4/yTln4kTCMbNg+KDN\n903DrriOpQ4Wxke5Hjp0bfVuU7xK+mA/NI9fOn1dxP+ifhswUqqXcqFwMRtT\n7HZkNcR3N0SZqIRnAH9+c3vuXZ2KfcSyjpRdqq22y3Vcdmqj2UB8a9WMihyK\nIWhRb16ynyJO1mFpAmzHanDQrzK4hKt4ojNzcumEKNazt2OD8vi2VRNYxoao\nFJIpVRw3Fm4ITWgAisSfvyWfoa6HRmHMegz9jG3UHUp7wbGKvnV+p2ZWnqab\n2l7wa9k9aFY0Ya36MJDhi90lqUYi89x97nvt4cCQTJd2Ub23E/G5D4uwR9Q7\nEfYw9HTYDdViOSdjkFQu2w5qyS7YshAdutXNzStr9PryFbGppS49/stVoFcv\n7AqD3CxFsEw116rRp4bOcEGVMKEB/CIljuBGUws6SBeVfB1hefAdynOpyScO\ntgDKvwtLCqe8aEk622HH01ELQKGNmWO1AYio92wBvAKzv8M/hMEJMtblMKZc\na61K\r\n=M7PO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvDLrp5+3ua5/w8WUMWgiFQ2y0gFw6pMn8YnGmt3bU7AiEA+VqOzcHEs6ms0rEFjupDLqFn7ELCyp/LI+J77FG0SMM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.10_1548340628629_0.6341339569455067"},"_hasShrinkwrap":false},"4.1.11":{"name":"@storybook/addon-info","version":"4.1.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.11","@storybook/client-logger":"4.1.11","@storybook/components":"4.1.11","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9f30442098e5350f5ba4872887cf9d1a03146e74","_id":"@storybook/addon-info@4.1.11","dist":{"shasum":"b2ea3a4fb4cad208f9d6075737b5bfe8636e28f9","integrity":"sha512-eROXuXS5YgLeXsnkqjXqbZ8UFgNIwORDkn4UfD+Aej1//SWpGeNihOxQvx+pvs0NnsTR+/w4c1gbqa/Gr3f78w==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.11.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSdC8CRA9TVsSAnZWagAAc44P/R0CTyyaaz6fgpj9behK\nYQQpfaGaB6vTG/lE3pIXyigBHbWUgvvo/ACL23MFyEd9pjSEk4Zb3Afa0s5K\n+EHOJIC6/wHfTEwzffccyRtIiJdnoKF2RVNd7qNwsxkHKPRSfMQj4F8z1ZV9\nW0B5ESdizRwY+6AR9vtp/BvgbukXAa4MWc9/Fz5PLKrgP9cksyhWlw1czd5v\nm//9gz1aE55vjgrlVc4fPI3R8W7v2VubRV2B6v4yjenyDIyrStLdJVV76Fjp\nwim9qEUc49LkKhHn5ZR6h2x6EaRBrzEV2ouITlUHhmA/jAC03ldhZgC9WEu9\n0i1ieDb5m50FB3LgXUF5q1WrftsKZ9PaaosSmr01aOSXvtJ4FrWnkDAWfxWX\n1X4DbmLUUo3Q/tLxmY880redaH4/pv0sJxz3fyEU7tMLzQCm1//orOAS/kzJ\n8acAk3DxQzr/IDlCe9q4usiOZcZXehnXccvJFzjAk5oIHj7dQf7IhY1mLTp4\nr0FNUpSZ8U7ie78j+zqd7wV3PxUPHrktg4zxaei9ur2a4xJlxti2QbrjE3NL\nd/DCJYwfBFUnsoq8u6PnXH6hfZua4GUJbnksH35FLaFUqHJWpVakH3PFublD\ncKjuhBChNoKrqPw/PWd2wA7w4gO/yjPPZS7GDy8WYEegqJ2nfGems1zi8mas\n8Jef\r\n=fWg1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkLCHOz2CR0Ugz4OY5ZtYJzq7u8Q0kSjGqGJhnn9cXCAiAsXX9zyfUdvoVT4j5rUWQctwjz/tTXEyOFKbfqQiQWyg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.11_1548341435489_0.15856409222458612"},"_hasShrinkwrap":false},"5.0.0-alpha.10":{"name":"@storybook/addon-info","version":"5.0.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.10","@storybook/client-logger":"5.0.0-alpha.10","@storybook/components":"5.0.0-alpha.10","@storybook/theming":"5.0.0-alpha.10","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aed4c6c3c54623433e25133f39c0a74691eb4c19","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.10","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-+sBztDjRPDtSIUlIHErHWi5eYWXQU+JxeoJ5HhX1ZP1u0Yuih18I4YP1GYR1Qt0X9BY7OS2EeCizu15mI/Nh0g==","shasum":"5505781a9f4708efedbb50b45f954895491137c4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.10.tgz","fileCount":64,"unpackedSize":756033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcTonyCRA9TVsSAnZWagAAVUUP/i7SzP8pquHgrjUuv4s9\nccERiYq3yb5+V8C/gvEDySSUrLQJywLQ+jnzBzVdhizYviz3BdWgRe6BJji3\n4NOelhBnQXOkIMdcNuAurzrC0lbo3jw0WeMwgzo02c+x3S21zF1nD2tRPCtj\npiSzgxZhX/XgQ6FGmGJjdTnz/85HJL9GSxwhPwMRQaHGHwWlomzYLEWejXx1\nVKiNffqfeO77NFKTb3EHGvctqQp0D/KoMkchGzF1+C4XuRKVqtOs4+OrrGsn\nzYxc5Gn9mN1dM1RSdnyuqhBisN7Lsiw+TKhci1zCMhhtXXZ9RmqKkYTldZH9\nHyc4vwnLpVAGxBnZdLiIDfBv6rLZExme0mFEuRaLBzbMZRJQrqIC1mToqcGj\nFM+/kefAtcKM+hqrmPEbpdint44e9qID0F6F9X7IbR1B0KGASL2E8oxelpRU\niP1xFwNPyNxnpPIc+hLN76A7ZYDavOSU0gOhqdqk2FcDt1pCCP8Zh6Ry0J9x\nA9sY9S32J26MUmdgLSLmu6GtH2ksmgQ7PWoLaX8hCo3NxJZRoflYQXB5+WkC\nIdbBCVvaxM1N1kHV/q28jMcG7HUnl9nZWdl+zTQzWW9LXExO+KhGmV3bxw3l\nA5G77UQ0MTxztefMb8u2rgC41+CJh3E4dYsnapjRNQW4x8HRai6EmrN/wi1V\nxmOQ\r\n=craf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbk4gUI2tiNaWmT8EfhqOOr+O3UDjUNsQVdgR0MyChPAiEA+7o8rU5pjPYmcx8ql5bpWwjtEqRJ4DjwznAbHmUdkQQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.10_1548650994260_0.2553023935336125"},"_hasShrinkwrap":false},"5.0.0-alpha.11":{"name":"@storybook/addon-info","version":"5.0.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-alpha.11","@storybook/client-logger":"5.0.0-alpha.11","@storybook/components":"5.0.0-alpha.11","@storybook/theming":"5.0.0-alpha.11","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6ecf42b4e75b646edb1df40ab7c306288c46387c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-alpha.11","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-mvkOG1gtlNFW3c8urNHwlfX3DAuloQLUHKQJq6i191LCwbpq+yGyXXJ0o6RkUdXFXYETdWktcvrcQcKRClWqLQ==","shasum":"c1e709cbde81fb58eff747e5c10b02310926e58d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-alpha.11.tgz","fileCount":64,"unpackedSize":753303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU0FVCRA9TVsSAnZWagAA6YwP/jlI50HDIGYGBzGhwAML\n/b5zq3ODrT6tQoFmgkeY3wngZgOReO3DfMM9MskN3YVNgxY0LHObAtU1UFHb\npXaOyZt1Reka9K7lfkzpzs3+thLEs1thnTqMP2r2oF9tezFj0V5F27a4gA5U\n/ZZKx7K93qymRO/Bm3/xCpE0q2rpSdbTfWCCqL7B3b323d35gGlxRscvXQB0\n2b6+2+qBbgDew+YJE6HN5UlimaSEK9x3vRCkZSp05AkXkpTha1q5YcJDE0IY\nhuF1dpK7sbZd0t/Krh0/+kXZzUOdg/tCfSwmxgOnanMpgBmGU/TYx5NPM9n6\ncJOTjKf/kxdvnrE83cQ/CyeEABXKaB1lk21XcSmTPkd4XzVLsSjCeLJ7r8hc\n3v/w1dqxbaFink3W/O89Awrv4Nz7v+n5f+bN6sQf0qPdQGJOi3HggKpBnO4t\n2M+b/20mPS9jHwPwGCHmGcQzj2Rxl+UXpWq0hkadLtYEZBwrp4YRyw11pvOD\nugA2Co91hn1mJZrjpiNSsV5bLRezjKqWASFvJxgNuv3VrzdndC+hP/nCVFm4\nAtTrnDQgs6S9WCbMc3oZgSmkYP5ttI2HxyTrPyvtJvXlQPLA/9E02qSPdrUo\nfMvWDfQAAZup9HgXNbaVHOKPe+HzsFu0pG+C50wQPjOt3+SieHAMjhrH1VvL\n1LAG\r\n=se7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFR7qNqHn5kvqlOAGhdivXsUHzW3z6IkHhthyvHWn43AIhAO3KkQkXGpbhsSRiuYYN3IJlbIwLYPjFEOFcw0A2JNtd"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-alpha.11_1548960083573_0.6376559732094382"},"_hasShrinkwrap":false},"5.0.0-beta.1":{"name":"@storybook/addon-info","version":"5.0.0-beta.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-beta.1","@storybook/client-logger":"5.0.0-beta.1","@storybook/components":"5.0.0-beta.1","@storybook/theming":"5.0.0-beta.1","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.7.0","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.7.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a146ec37a28ede67f24a9181a6be7c3df5f7448e","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-beta.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-u7CCc9Od7hkoajWFD1TdDGUP4tPSIcsvLl5p8Ex9/iMsV/1DGlh/V3EWJFnRtFDZJPxZY6if3Y6dDK58SAydaw==","shasum":"5ebc3fa24004082d4574850abfe5d6aa78cad966","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-beta.1.tgz","fileCount":64,"unpackedSize":753293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU+rdCRA9TVsSAnZWagAAGMIP/0d1XMBVPka4Jxr+l4ka\nmfwHjnpUqMP5v+cYbDSmR2cqzFiLC98f8tjlOWHV6enV0i8Gjf7gfPbFcmbb\n8BZytjNEye7hUHXwCqFqr0Ja/4A0EsXA9vMrfZuCFGNPv5NVNwztecfojm0l\nmqLpog1Vr7nKhRRzoCXHYmW0J/BEiiF13/R9/oV6Cjrvp1ObUDBUJt/JOWZU\niw9A90AbwpBiObwd7af1XaEqdJExOnYX8GRLOsP5PZUIMPTX8nXtM2RpJUlu\nZ6Zv1ueF0ajr5ifXZytyh/KhFx8Ydl6SLxUMf4Ft7+JCU5+5J3HtEWnAah7L\nEgaaMuhniyonMmK3FzmMurMEHJfAhFMYcJ9GlFN1vKg1hDl9UhxNmFufCsq1\n7PhQMwsOFrNxNpo1kvFjYHsGNhaoJg7igNgj1JCLydeE5vAWCRoh1GVirBzc\ntX4/LLrVEXkBPCyjg/b+hmPS+iofwJrA7CFobQfcLM+HWicBvdHmKoSEDTLd\nbEP9rM/QkqnGc+5MmyFDVLYaN6xAhCT5k3RYhRjAFF6z2xMoowNNAKJ3KkE1\nLaYVnJJgSnQLGIpX7WJ1iNXm0VCsOkiKkxKGgc5AXYbHXx62sF0y3+XVf5+c\nd6OdNcBDBiS+Dm7RxrJZakJZyxT1ieutjhh5DaRToxvYmkIP/fVb9SuZxit9\nXnbQ\r\n=iJP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3Wd1unjn79b/s7MfXIGGjwXFWZ2ObgYEE3AhlcdytfgIhAPDCK8UbBzPm4ypW7hGZM+sLEvJKH6JlETOvtJsDFO8f"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-beta.1_1549003484805_0.6536654865039502"},"_hasShrinkwrap":false},"5.0.0-beta.2":{"name":"@storybook/addon-info","version":"5.0.0-beta.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-beta.2","@storybook/client-logger":"5.0.0-beta.2","@storybook/components":"5.0.0-beta.2","@storybook/theming":"5.0.0-beta.2","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"025b9f48886bce334035c83f136e06c7a7625838","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-beta.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-vCVm0Kc+P9rKI33Ck5LQeMVNc9VJQs7kckg6cJuS5teBYiYk2HJa/Dcnx4S9wyEvIvdB6ZSW2Rg1zhivDewb+A==","shasum":"b67d7c1127a8f32e63c92ee83eacbcf73148561f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-beta.2.tgz","fileCount":64,"unpackedSize":742261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXkoXCRA9TVsSAnZWagAAHskP/2Jb8YSsUX6mw+ac6Ho2\nEe+M+ASz/R8xeS7x56jOmy3FOaDusJBLkyX/zVox57xOoBKSyn9QfA5M6aP0\n+8fdiLjPP7qyhSiCP8eQbvEIa18t1FCO/BcwAL3fj+OeZXFVhKVeHDdx5TFI\nxhaDdDdX4Eg8oo1A/gPYXs1OYWHuU1zcCvaU3QOj7i2Gol55jailMy1LEnPj\n3W5BvP6vjxgp+ugD6cmOMXNaggVc2pyNPxAcZlJz+JTDMHHvZ18bNpYcgHID\n9NWCgSLcFrJ7Bu4tEFx+nOcRK7Tg2e1Kf9PxxbXsXC+tNqEwJXSHDNc9h4Pn\nd7SyD5b74UylJrfCXwTkusXvgNI/N6vyoGugU0vQTinVU03NFKODf2tD5IcF\ngk2Vtysxjci3i9Fy7wR8cDQEYW8RCM3kCfwyX/qWaZLXjRkWDLT5YKH4r9ea\n4/z3LFfJIueYUsaN0n8UFo6JHh6h2j02sYx3UT+3w8gR9jSTlH2RzsjnopXb\nG7amPrPBs9nkkWRZWEz7XZjOLkKtdBtqbe81XU3VfvBLWkGG5iyNRczN5x9v\nHqVQEbDTtzi7XiQa8vFAdTxQms9uxZKCIUNG9EDsKBKPJehhdmGl/NA2xmvA\nXDG+1BJA2bRZkvDF2wgP6LF4Kd9c5I2rRjgi5B732L5FX8obDk0jQPQt8iyw\nEC4/\r\n=t5Q2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1mfgOr7PuMUmWir9yhmFnslhssu6PaFU+Uj9OPXrgyAiAU7If5wgiwtqWnB7VF+NsPlsZhe16+ZnXyR2V+uH4YRg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-beta.2_1549683222908_0.9019646573614297"},"_hasShrinkwrap":false},"5.0.0-beta.3":{"name":"@storybook/addon-info","version":"5.0.0-beta.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-beta.3","@storybook/client-logger":"5.0.0-beta.3","@storybook/components":"5.0.0-beta.3","@storybook/theming":"5.0.0-beta.3","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"247dd6a35382f432a39166615fba4f3ba59add63","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-beta.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-tIDLSPDMfbJ497OhGzyCsks25ma8Tpb0xzePtMXd9CfKZKBAI4FWaL2EVvAUERysY3YeD/NB+F3Bjo/MHLNGNQ==","shasum":"a97528a234ce52b58780d5eecf86c4d63c408b37","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-beta.3.tgz","fileCount":64,"unpackedSize":742261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY45VCRA9TVsSAnZWagAAjxkP/2BcXrldJ3PRzBcatvHM\nojnSieLqHEt43KiL9UDAvl7Z0E1GU62JFoOW06C/MEAVavFaGNSaEjv8nZuu\nlrw1Z8qw9uVO2Wzr65IXA0E7poIE/39wiCfkpxCKLshryC9nYTYgNFVZxStZ\neD+PaFo/k4uTgb5spzJawhtF5E1Qcn8kgouWDWLRtpxR65tSzYbkNjI8Cv14\nBnbFT8OO30JGtVtAdsE7GeJk5eWjPFMuaK2ZOUDGnXByAT/7oKE0rrNc8jRQ\nKl4XU6cDvlwkGzulXOjvfHvejLkPK+9qjMmg2k5spYRRTb/b7EnCdqP8ETWk\nKf6B4z68ioMiarZVFgIUBf8DIh7zJAmg2FbRyu0SjLIt/L1j0V/etrEbr9q8\nM9fVp22L6Gv9josieJ2VALSQmSxHMvFcJmApRsI5XGGe+JA0LtYFD/KJh1Fw\nmDhMm6r/9SvordzrGrMFVsOM5FNaUwMRySj5if3+Iu8r8oT+huzc2re4+ycA\nOz9yJRpf6pck8g2TPyoQIWubyDHc2leX3A9FPAJYSQC7Jn072bPUN2f7zRXM\n/s99R/FfQ/soy4CydbEwXacbwyoj9nn9v4nNC4WRX+WagQV+l0FLIwryze4n\nl2jJnVZz/gkQn1G/Y1ryQeVRTSXk/QpmARoo9GqbqZBPVClj5HM0nZ4bqj4c\n6OEg\r\n=Ds52\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmbulOFlgmJBqyvrNEaEz81ERoh6u2NwP7K6xX1nqG1AiBo/1QNzLUEyj4R+anhg3ZPzehPgJy7xWD9DecYET1udg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-beta.3_1550028372945_0.3656353814870472"},"_hasShrinkwrap":false},"5.0.0-beta.4":{"name":"@storybook/addon-info","version":"5.0.0-beta.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-beta.4","@storybook/client-logger":"5.0.0-beta.4","@storybook/components":"5.0.0-beta.4","@storybook/theming":"5.0.0-beta.4","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9c28b665825bcda33285ad6627999d55c7527bea","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-beta.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-KwOkt5UpCplGKvuYlEfYGq63nbbKVse0wQiD/qGWuROTcmyVPdlio7Ukbk4k1qeFFkOIXd+/qqsa2EVZZwYMQg==","shasum":"c1f4f30c5f288a6bc74b421a1a91d0c890f779ac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-beta.4.tgz","fileCount":64,"unpackedSize":742261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZniFCRA9TVsSAnZWagAAKz4QAKT+4n227WRAQ0kRU9Gl\nJ0OEO3Alva/yQL0t19De5rNkLjibPwLvPQb3TfUbP/xPWuHGnaBTdsdQUn01\n19Wx8iHuVee2Okge8BUcPPsHqRLHo7a7jX+V2DBJd2e3W+XiBcSNY1N+7cFi\nyc0PIwv2XKVsnuGdFrhnv8XgeBTKNh9X6UWQFUXDhzQp2dyk1H3veU5Nd9N3\nTfGmnjKkqCnLV445Cxw9J0U8v8efNEA7QtCcrgn1OwryaAD0i2jX3ZEug9Av\nHfOrogjMIMGzmS8E4pEjVeoUSSlO5YR2plGq3O9B3L/TwjuT3y5hUI8F/DXb\nRcsUH1BmwtdNGR+zbV10x+A9+WdQnM/ThyAE3M3HDOnACwF2TBKT/lnLH9nu\npb8MOA/HHnNY3Uks7WS8lOUZMa2+YUhuNkHi0A6kHH2Hq9ExVah65GbDnHaD\nV354Y02jr9RlLFIHh5JRzlJLLMwfA4RWBIeac9GQ8EFSbZW9E3x2KYJM0lU8\n0nXvf5vQtFq0N1+K1tuBwJE0lwoE0VCa6JYtvjVe1g1Es3mI/YzPNDMMeBZJ\nxSWN8QkwiD3ji0moVuUBZaHXpoYktJtYG7+Y6BWf2t5GmEiB+Ief/lpJ/rri\n24WCID66DkvbB9HqqiiC1xznvIlV6RZa+ULyCY472JhpP3ElRbgiYqokGs/x\nWyZf\r\n=O8+Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAinIOXZBKGsT/3LgB5xTdZ2oltS9YUALlUtBwTltrdWAiEAjPEL5vUJAE2KSwbKIs5wpGgASIOlDiCxq11yUXSVO8Q="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-beta.4_1550219396411_0.16018401652462866"},"_hasShrinkwrap":false},"5.0.0-rc.0":{"name":"@storybook/addon-info","version":"5.0.0-rc.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.0","@storybook/client-logger":"5.0.0-rc.0","@storybook/components":"5.0.0-rc.0","@storybook/theming":"5.0.0-rc.0","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"93ad5297b92b4dc797961c4377cece1c5b780a61","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-gMEILp6KeWDikzw93DDY/5DHMcv0T3XGrIjlF80fbcRYajS65w5RoWAHuy3ZTIwJKv2meTKWJf84WIrQKJ4Wig==","shasum":"042727669b0761a933dea188b0e44e469ff8d497","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.0.tgz","fileCount":64,"unpackedSize":742251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcaCPHCRA9TVsSAnZWagAAYsMP/jgNrtwHxtJjvNKimSTi\ntaPOsOUNaCN8Ph8On6pOmgzrOGhLjbpUIlrQMhZvLvF7JS2+VHqIWvZcAywj\nxprIiZi9Stu4Qfd6b1uMWYqBybJAUU4qqk2+dmZ3ERJwRNO3st7n5zbG4t3t\nPvYqAV/4SSYV5YV2gVs95KsKWkNYMSCsDnfpL4WA9AGHLs2k98bOiRtvCZAS\n8y+aQUoa/rWDkt+EjlNQyHvI57M16Mwql3sWH38lJzT0+NK4iBqkOyS7MJM1\nc1k9D1UBbqC1p/JneDq0VFNMsdcyF1xQRjMga3QoX6TeWFCtCZXj1uAUyauB\nsTEcl03CoIGszs9SO7uDNhZQ098ug3UrXWGvAomVXU1+ICkpESq/ygxvTPlY\nVFbT8JRDxUKzNOqhihJFJtq1yh2ISAa+DFXKW/8rhQnsfNte9Rxs1G+uR11D\nahfWBdxWFNtyiQE3m2usdvlU0MWjNW2DOgxAoaECpJFWoUsp44K+vl8vOdR2\nj5yx6DBHjAq2R+/ew50YQr8i+/mg3JDuWvcQAY4gsJ2xsMHr1F6EFtSstbwU\nYW38/yheynpdGDjAehwLQZFbtNmp50mFIr9UKG7K9SlitAEWWeOgCv89YkiD\nY1IpY1tH9a4rWTWnuenAQ/oy1y5bpugiwQnaNtg3eSmmUvFaOSzw0qav5Drc\n98pi\r\n=IRGS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpPiA6ouBl35hC0BLEDmEu0xq3u2X/wRJuRbhfjLw11AiBbqjLGG80Gj2CHY3qTV0qRr5Rp6U80JzkXtHgyURZ7GQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.0_1550328774908_0.15489620826676376"},"_hasShrinkwrap":false},"5.0.0-rc.1":{"name":"@storybook/addon-info","version":"5.0.0-rc.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.1","@storybook/client-logger":"5.0.0-rc.1","@storybook/components":"5.0.0-rc.1","@storybook/theming":"5.0.0-rc.1","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"22d3ee17e6f5931234951b6e7df43b1dc63f03b4","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-7pZGNMGQuAL07b6qk5w4cJtlkOsurvvf6KtfyWj+J9xZyeHdOgXbF1FvMmXI37eeBf2Brj9zU81uocHe+m0kYw==","shasum":"c479f68df797649b232499205423d535c79758e7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.1.tgz","fileCount":64,"unpackedSize":742251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcaDYkCRA9TVsSAnZWagAAmvYP/0+o3kQwDHhbdaz18kDE\nkaOiXd+4ylppM3Q75Zwk97QxYoyK6y1p6XYMC7AmU3O1TfP6tMhQvx1ZV+gY\nbrxsTE1ksB/tnjWgAa/XucBrYLuJ5e5u9O07fTbAxrqz5AFPdXF8I+Wj+CV5\nku8V+Rc36y5vPl+S3BqouL758tbKLmBERCChiuyMCn/ZTzkX7AHlgeS1BElo\nMaaYqOqkWcYT3JbUbVmAfA4ar8OdForAOYthjqxmAdekFwRDdzY2z+UVMnHi\nhZCjBFC8WFSMlQXfsqK1wB2kDYspi/CbN2y3Ni2HMGZzfC8mQv1BzbUdA+Av\nxjTTHRJiuvo8oV7xxQxMTU6Fb+gir7/WK90U8rQ6WChKoTlUAZOie9ETVxSJ\nvphxOTWvPIlr0gINHK/OGqvUVg3mBH0swUW+qHUKbdTPpspjarS6vedR0V9w\nYuUDuwotSFpUG6g+GNxGjyPmzSQigjqYPhSdduFb3zzmKZo+JV0PgvU/lViQ\nsg3ep7DDLXjip97QFLRk0P0yzT9FZOldE0oYUuO6OlbPA8im1N66vF/UtfXn\nhbTfWklDDnMJR2H3RYCQytF9KMqcGRKCPJsxYiKdLpJv37v1PfjfL1EnCKEK\npJCq5iUzegNAQYHZa+qQnDaxhRzKb0C8NP3XnRIvIESd5T8DYTop41IJco3r\n7OFA\r\n=8Ymw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZCWe6tLjeew8MA5c2g/K08yxzQSvb9QXXcoRYpmrEVAIgfrXJVSLvYKFYBmLwc5VMasRSuJwOhl3extN5/tKHr+Q="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.1_1550333476135_0.5764697261555232"},"_hasShrinkwrap":false},"4.1.12":{"name":"@storybook/addon-info","version":"4.1.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.12","@storybook/client-logger":"4.1.12","@storybook/components":"4.1.12","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fbd7ee4c80df437fed4bdc6e11140733fd450080","_id":"@storybook/addon-info@4.1.12","dist":{"shasum":"cbc95ee488cef2131083d0c8e6b95a32287cbb5e","integrity":"sha512-cbIzcHS+JkveM9ySwOtpsRsb++jHXqgpL0JPrzOQ0okXr/KcLZglUeijCvnRZgzfQJhQeUBX5t7YWMEnCtPZGA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.12.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcan28CRA9TVsSAnZWagAAYGIP/2/H0C2ZBoTZ0dr2ao5M\n7jJbA5L8gEYKsWVL3kTrI6wbjJ0TYYoaVMkZ6W6pOKqpmzFBX/hE1zAqsxbu\nCv3VlaMaeABSMVigDGmOoe6AQeZdi9FRyB5U14GmmvOP+I0FO4+WO3fXSE8A\nFcUgL1yUX8IKZ1I9b9IKZVSEG0kJzU0hy0drWusitIllBXsJrO/QMRz6F3Qn\n59s7OCAV5Lwe3YDCdfMlDjKJiX3c7n+v7i4eSNuxM2GlDLblr25Sx/qaQdJg\nN+BgJwTDBLJ79xz/TaeDTOUndgkV/5Tql4aZ3CnA4WpOAXw0R/L7jxby3LW6\n29a4I7yzxs6iOx+G8CTYpmhuMJ7NvD+bHYrEHj4dsrAc93Rc9DowS8J3doVR\nkDwaUlzueDwaluHh9Kry8boIkSXoylehwRDahvI4DEYh5vzmOHE/kQNZs1dw\nI7E1dhrImdc+/YZkQMf0jcwV7dKJxOzvA1x5bK8/15gpfO56q9d12PPh2uZQ\n1IalzArwidvZd6CLDX/5KsjBkY6uO1inKTfbQsaxn3oehw3tUewEwl2H4wYQ\n1IrUOZXT8Wa0AOeU9gGFXdMRubmXKPVgL+KCegEADW2AWR125has2gxmheii\nmeqHqVf+YgYUu+HdeQ1Kp3v8r95JvFCEu4MIpazCEdNRDU0HWaBRc9oCOqU3\nlYoU\r\n=ZgZd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCfJj2zjk+bvV6GZm3Vr7mtz9t4O4rRZ+HKPPuARtK5AiEAqswJiLfrtg261VMny5h00EdtHI8mFSf4+qfIlCoA3rg="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.12_1550482875476_0.9427022373358149"},"_hasShrinkwrap":false},"5.0.0-rc.2":{"name":"@storybook/addon-info","version":"5.0.0-rc.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.2","@storybook/client-logger":"5.0.0-rc.2","@storybook/components":"5.0.0-rc.2","@storybook/theming":"5.0.0-rc.2","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"71b2c9e5798f3768acbeabecb45559c07138653c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Vb7U5QYQLt/ym/ZPt4XdFpnWK3CvrLNUL2v0cJy/fFpDFH7FeQdrvyg7RQLr7xn+bqB0zCfeA6IPsRb6IR4isg==","shasum":"5aa175b3c62f05d92d83f2917039f86aa0d74f87","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.2.tgz","fileCount":64,"unpackedSize":742251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJca6/ACRA9TVsSAnZWagAASfQP/2SHq335Mzlcg3rIBiDF\n6SsO7z2G8UAkx8UCL/BQpAftYtVfrb7mRNtDUoWXpcQs64Rx+xtilzrQo01z\nboaq3XEikBv3U4xONwbNUd+ILpGejfc1VZd7yu3XtzYkNn+RgjVkh+2D2lDS\nUy0DAw3CpQxPCq6Bmgsj3mfoSiOro/RkzJqBNyrcqxd8tAE95+z25N+gzQsV\nQUb5tjWchaOW3Wk3L2CLzUBlwpUnBtXBQFc6HJKTt4rMOkgzq1Ahb8XJ4qDj\nFmXDA32SdNz53wEfKywlcgguPAkChgaCYQ0M5+TPPX5r/yRdt9FE0pLy3t0u\nEA4h1q0qF+HeKvt1JfhSSxeYYTHMJsCqZp4KUXAbNNA/GPIC1iETzJjtHOjQ\n28yeADRKBPsMZG0QylYx7SvSuzSh5ysggh/oTG8ZexQTHM40RqJX6pJItIz8\nwWZ0dd9GkOGiVS11G1zu6aY0dKNa1VRMiBMYjjfeIpBRzJ93UkWQ1Xz1mKN5\nRhdDqXXY1UppfktNlwQPEjN7hFdjbdc8DbFOQipPt00xXf5HdzhGZgu2gQD2\nXr95vRZa/IlIIVb5+wBcVbrtpWqp6D5ZGA16yUopQdpb+6sZ1jaREosl3Lxk\nX9Ura2bixVM9zgMpe7yNjAlOWe1cR2EAffN+1xPIjk2hVgY4Q3fFCWa5wxUp\nrdFD\r\n=Bcsz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAs9utWDIjd059qoa/wN4Rcuob5FccT6521KIqZnsoBhAiEAnS3nHKWx+6T8AnE9/Ap1Cy4g+eto3duZ/mSuMsakWN8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.2_1550561215614_0.19869147235851337"},"_hasShrinkwrap":false},"5.0.0-rc.3":{"name":"@storybook/addon-info","version":"5.0.0-rc.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.3","@storybook/client-logger":"5.0.0-rc.3","@storybook/components":"5.0.0-rc.3","@storybook/theming":"5.0.0-rc.3","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"698f32e49855a5b4643436b693706865329a5b7e","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Yjg2coJUg9asmZZpRsW5dpw/wRr08UTD/cBW6ErGV/wOb9QcSHMzR09X6BcLYhjN4v6uCw9B3dtcKJ6W50sSjQ==","shasum":"74293065554a293964c717ccf78161b89aafe3d2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.3.tgz","fileCount":64,"unpackedSize":742251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJca+ezCRA9TVsSAnZWagAAJTsP/1ZfEK0HW92Y4092O0dK\nTM3dNzzwTB3isEzTAWVMPhy3YICnmf2Mj2o6MIezHEdACB+UsqJZW15CERGW\njPglh1IXVqsqXy8qilcmetDu0LsOcKgIKk6xB6/nIufM99XK3E6Ti1oDGt9K\njOlr8Pp0+1nDw5l9rFOt2qN82jNi9lqc2ws9WLB0lU8fSwa5IMFt7bzqGgHp\nxusmt91GjKO0bMERK7NOUv9E88xWwgnn4fLzuOWKu6DMqKyQq2jv91BF+MW4\nHkNMlyDP21uCInjk7QIMd2vXNb43tB6JNaurUFEGy+4pykMWVK3pW2S23G+e\npT1p5QBehNrY6d+Rg7RaTBlpABO1ftZN9w3uWKyKAnwnphjC43OarPb6Rare\n8Iyrkm+hkrAj/wC9q5UUQw1JO8P0DPZx75EH6wySueV0tu1z5/TDiNekkz9S\n3VSkcU0h6h9ZHz5cW03a7pLyTIoxy+ovu1XObArAfRcfl9mn0943lMezOJKM\nlMmAjbguLinvxr5sNdeoF0a/r9QiHWLhgFLlODpnPDhn9X0Y+WXJZhb7BwEZ\nvxfPTL9L4418a1OPXCXR4xlsf7iG47t31iaJznTQADvi4jT+WwxOjpOeTLmf\n1burXq2rBW7DNCJqTckfaAf6bWyZsUZhgnwvuiMvy6zfJ0ITIKuy8k3Ufi5B\naPy+\r\n=fNwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUgdq7gu4UbAl2tV8tnnY/9IQFeRcCK92AoZuRi0BuLAIgCO3rlepJeXdRcq1as2WTaR81fLrKokZsH/2PET0YZq4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.3_1550575538484_0.7344719244913278"},"_hasShrinkwrap":false},"4.1.13":{"name":"@storybook/addon-info","version":"4.1.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.13","@storybook/client-logger":"4.1.13","@storybook/components":"4.1.13","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c521ca3af0c7ec3b2b729bf134f96b87d77ff8b0","_id":"@storybook/addon-info@4.1.13","dist":{"shasum":"b91494a5f4e69998fee9a3110717c2bb208f1542","integrity":"sha512-l30GWUUYGpXhYCyO3yKEdlBCc/Vc7+q2tQ3VdOmlMcPZGW9QxJg6Qav3GC8aIPlAhcFwlzxE4bT+0sCQGSKUIQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.13.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcblrzCRA9TVsSAnZWagAAdj4P/1ySMyT46KZLDceyihki\ncEZ/sFTJDp8ZlKTF9jyBeZavRWiMAb/y/SCmNDBUH2A5eviJAb+ZT54ANENL\nzfxOurTI5eAjCeJnekDCQgRuXVWrDdAzUuuj2mdq0sPYmajvpj5ZV7zXIPxc\ndR5XNf9+GVrB72P/WbzRd9M5h6WI0yOGeEvKDyxZcvyvs/dyS4TIud0nhf8m\nYupk2TpuTWJUnI7mOqM/6gU9SgKZLGJVx1/LkvPUkSnBRe7eJEyOipdbI4VW\n/Kuhoa/KuQjPBcqDwjFM4slgc0QX3GC/TaoqIipBihDhVWxKCtC9HhCPc4vy\n26XPwlUQL3Oh4SXg8t1y7ITRmWXg1KXU97CBekEvTadWbGV9jXkbPuQF7qH9\nd5SrYDraJcdJDx8FJlyEppZo1ivEE5zRmMeYah5mTpsdAeZno5zLOEvwcsR0\nifoYrixOhDEHu1y2lfbppZDZ1NtsbD9VOrFUR+t+jdZ9bCi2yf9t/DS5YI+x\n2J0zMZ+GvH726L3wJM1rvtJr3cDtYrj92K98rUdqm4fIZ8wDPb7gGSrQuztc\n686Ii+8aWQQkTIa22a8A+xK9HFr+kHdX94n3YtsJMvbEokRZ50Np42TGOhZM\nvOlU9nJ/K4D1sApxT4QVnwenQ8g4M3fxnXgll2STKqA0biWQsIFGIOvaFTTx\nR9Bw\r\n=oQ1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoV9rVvpa8rxm/n2pvJ0HNJ2PoXqOowMiVOeVnd3lDKAIgIsHT7UDUMKs6/Lf+1zMS2efEgk3irYRpCpuiMtWKoUQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.13_1550736115035_0.603765186920002"},"_hasShrinkwrap":false},"5.0.0-rc.4":{"name":"@storybook/addon-info","version":"5.0.0-rc.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.4","@storybook/client-logger":"5.0.0-rc.4","@storybook/components":"5.0.0-rc.4","@storybook/theming":"5.0.0-rc.4","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3ba5266050e404cc9eccd002b4b9cf9324f6d131","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-IK7Y5+A//YiGpDSEPyu3b6zS94kGYbKuvXQeu2RNIZi1Adh8hQe+//PVHyM98RfVohgX0H0/eMZwWRvxlt74Xw==","shasum":"10db6c85decea7ecdc6e569afc23d59148440de0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.4.tgz","fileCount":64,"unpackedSize":742381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbnr6CRA9TVsSAnZWagAA2wcP+wVKfJXo91HjGgarCdrD\nRu7lLCnsAeJt7qtyEugiJOM4/EDUNSDi0XjvVfWxDJWSIOtCoLf+2uhL3Z09\n+1ukpu/R6vs2wdJDjmVzSVK3JTlAcFVnjZuaC329cYZ5NOIUMCeh/BQM3b4M\nhEvwKj+pE37gSJvH3cp0Jw7qEYMD+4BhzcmfRLY2MmVlw3kq7VXCFKStXW4p\nys540CDXtDqFHXJCQCNWEQSEPC4Z59FunYlChX2u0ndaPaUQbS+u/Bq5Xy58\n8rvpRyKvxfZyokaP0f0vZ5VtFw4I3iwVo2wfJYOY8AmAaTwe5JtQlThprV0S\nUGtwnAe+W6te4S3i7D2pOWYoucGN3Y1XMXrYiXlr5zog98HvUolJpXkXdUql\nKh+JOD7nASl7piQlHDRZ4TYPCR+gboyeHPWSnoEKd5S3VIGK2mjIBB1BbnE+\nhUWlIvfvbrxjvXEAQiAgvT0BXrl3PJQFroQAKSylT5zkY3wU3UtEXDY2TzVA\n1n58jRzlZfiqA1+pL2DwrcQnLOdMeGEiqZ7IUAuIu/XxpxGBa0K11MVC9mzs\nyEeK43x3dWjlos2n9mgmyb66jRSAjuCEnmfNKapx5eE6ztZ/ujWvojX/WKlP\niwNGoiFrUSdUeGyUDO5yDwZcfQgX9zgT3qznCv+eCefH78HI9PpGdlSdyDbc\nA03I\r\n=NELU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfahefTE8rPSK5wb8pFQyR5lVriFceWm1rUSb6RG+WCAiEAuXB5MMEI9wOpIFNBWKtYlsqeCU/tUOocKKtzU3U9GPY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.4_1550744314158_0.11793460418563617"},"_hasShrinkwrap":false},"5.0.0-rc.5":{"name":"@storybook/addon-info","version":"5.0.0-rc.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.5","@storybook/client-logger":"5.0.0-rc.5","@storybook/components":"5.0.0-rc.5","@storybook/theming":"5.0.0-rc.5","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3982959868bdb75696444a25494aa73e9847b413","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.5","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-DQ/2vausM/gSm2+oe36UPzanqfCBYH8V6IE22tuddU5r5UMUZkAU0aMgKvqxazhzf+vyCaXAfyAs01AhJ9fJQQ==","shasum":"07e666cc0a00f9b7299a82739057eda6165e1c95","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.5.tgz","fileCount":64,"unpackedSize":742381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccQrTCRA9TVsSAnZWagAA3kIQAKG9glV20I6YAbAJuQun\nXPILz+L3KEx73ngl/TB2rpuhu7853VfgPWvSr46MaEl2eHzc8T1AsMW9LS5O\nG9LPexMlY3Kk567vXiU9YQ8M1Noizc3wTzkRX4k33ndqaWVyDmYZp19kckrz\n/rMJWOTymMMPeyQXr7Chjjb2OUZL24qS8THVoc1ryDJ+9JXrnOkFC6Br+WzN\nq5hYz2VtFqgR/usu/ZQOsiK5J61jBulfo5M9NGRiCj9G0WSGd+rQ0pfGN4qj\npBxuZaVs/kzgJFn4H03xEHStkaxPSJYBmpnDtdti7C1SAMjhRM3NSAJdewco\ndnE7haGCMQRX97Ao/+UW3etrSBYSVgqnSi4LX7GmIl18yurljwQ98L8UjbQ+\njuFHdMrKObvMb17KKAdWDM1FtNLifOUAifj8edsZVQDmjPHvtGHWU7CmqLFq\nl9q2zr0NdT/olX5tbTl/wPEV4mjLaWtrprPR+BHUmC3nNZp6sK5BR5deiUei\npwTUoH9qqaREZz8CLcCeaoAM0PIAMz7Tv216Ehs8SwSE2SFnlQVsD01r9t9+\nIO+CZk6h3MX18qzVEqWoCZNfMti0aZd5Iyi10z0B7xWQvpR2zQbQSi79YYxX\nH1BtPjb4F52Izpgi08hDE4F6ytnRqfPb+S1nPzNjRvB+Qctb542NGX/XRARw\nh/eS\r\n=shby\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD//dmK0Gcxcn4vmBJ+0W3uCiZRzrAMnVF/BfcVQgtuxwIhAJDiztKb/2ho/C2fQykWoqOf8vdT0LTCKlG2g8YFlj2z"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.5_1550912210426_0.9618298417689719"},"_hasShrinkwrap":false},"5.0.0-rc.6":{"name":"@storybook/addon-info","version":"5.0.0-rc.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.6","@storybook/client-logger":"5.0.0-rc.6","@storybook/components":"5.0.0-rc.6","@storybook/theming":"5.0.0-rc.6","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"70ab48e02c501c401c15e73630919ff1bd2140f7","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.6","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-3bmDRQDUr+Zl7UnuSyY7YDN+OI1o3N6TDRtyHlilQx/1O9t2CGGhktmxXHSHgT67KY0IniQ5c1VIjp7qea+riQ==","shasum":"36d3bdd01c9076705aaed96511e267a50bc1aded","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.6.tgz","fileCount":64,"unpackedSize":742381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdBLyCRA9TVsSAnZWagAAFIoP/3CRgHTQ1dYiAt9liSNZ\n9qmIEPpiwhGRpiGQCFZqJmmGDSoQXAGhrBAgByjJq+J5oLR2dNUh0VrwfFru\nfekTeJo7AIfXok5CbDq5ljY6q1aOVxS5aXmF6VfPdCXLmYWUKaQwOg8R6mNm\nsuKLSany1UPHGyONPb6ipO5sEcZRj9x773+jUkg+x3mqMotn+Q1DKc5/14Jd\nhY4RqOUKqLUmEKuzfM9EF0Wj9OaLs9SAx2hfpjR6uLBmU15l9KOjMtWXPINh\niApfWEUBH+f6FTNf1ka400GRqx4lhq0+lY/Ol35UsRpc2/E2L8maZHCB739G\nqNZ08zi+s5PA58msxO618JGv/S7RVGjOU+6CuAjPfcqSC8HkpEm2HA+MIF9Z\nadI1Mcomt6HMGzWA5Uc72DzUVzySjBMVd4Kx7RwuLuOqQ0wB+zlhkO5xzp2O\ndq8BErp44NdhKtW3khf3gPytbwlRR6ALU+x7ifpwFpR3ajY/wJtLqFw1NtAT\nYKID34LdXPC+2czP7AhihDXJ7uXzfyPcnEEbLgfA+iR2NujY7Uwznq1nGlg6\nRvOlOzmufnrCvR2k4dqLu3X1gM+/HYXaGg+pIKZladgyFm3YuHT4hoAXzomI\nQc5fTGP/HQ0wvYgNXVucJ20s+SjtQ2PYKGVqEw/WCLvtbBL2vEwuHX6/beVQ\nTGje\r\n=cMxa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCA+Te7nWotKGDYbzFP+4wxnB4Lvg/BBhCD3D3ijtM0QIhAOI1+iPKneELfwcYnWcR3B1Emop3K4IJXfoTfLvhqlar"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.6_1551110897719_0.2756172374825918"},"_hasShrinkwrap":false},"5.0.0-rc.7":{"name":"@storybook/addon-info","version":"5.0.0-rc.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.7","@storybook/client-logger":"5.0.0-rc.7","@storybook/components":"5.0.0-rc.7","@storybook/theming":"5.0.0-rc.7","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"163aa5b5f386f3ad07d27f2112c82185c150c8fa","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.7","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-3ulmKYxB6z36HxPSqyGOHLtDy83DygwF8gbEU/CJUYa00PhUfHrky026saG1h5qD4jrbqkyqM0iVOC7YmQ1aSA==","shasum":"d131d06d3e6dcf54e058fc3380dfdb089fd1469f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.7.tgz","fileCount":64,"unpackedSize":742381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdsqSCRA9TVsSAnZWagAAJ4gQAKTzMopJIm6acYF7Ai83\nExBeNPEjL8mSPz05hHNB+CYZwpMUlPaAH6oZrMPuCtW4pvOpsH3pWgw4ao1h\nA2HH9b5zIkJaQzJae7LW7+6BfZWcdqXNVP09mYOBsKk/L5gp51Y6J7E6/sjh\nKAtUIMbS1SnSUpJTyrRBobuS+2Ckzat/7/MPZ7PF7q247GDPyaqLHy5Ui4jZ\nB6faFg7bNmIgR5TKKe0X84zf4od2JhIsvRN4FmIWL1zqXHRR+s2l4f3foxFL\nqSfsIRfzIVrelzatLMY6tV6TdGeytTYce+4weMci4Af1FA9y8ZuxeroSCyx9\nDiiNKwxWZV+zx5mnuL0vU9DwVnV8hgBKEsT5o/KxJ93Txy8/WFasFQDc7Bv3\nFTMNgFxj8+iVAavD41jadj+x/q3VjSMh49dedVv6mTj7SuVQQjzvhGLTB1zH\npqPS7I6tKbd38QA3pa/A6T0U9ZOau7sMN6w2MZfasJeyIN9gy3iL8Ew5nUn0\njXY6FnSgefiYHimD8lF3jpqFvamS1krJ9xErG/0iDm+Vp/SZyWmZr5TmH1tb\nM8492DY/vCkEKjXGnkX9k0Wj7HRjoJSFTt99WcjPTgeJTHQCbXsZCd9nprEN\n6JTP6j/zwm8tVr9+CYdd8K4We7p8yn6wmOLLCDv60V42dG2clFsfeg1LQ38A\nj4kz\r\n=aNbz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFO1vBDOnUuG8Hx+E/mkNprKfDZaca1vSZGA3AlySfKEAiA0i/2ukaUABPBtOYbM+b4Wvx3WniL7E/bB329lRUrdjA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.7_1551288978180_0.9305088894698748"},"_hasShrinkwrap":false},"5.0.0-rc.8":{"name":"@storybook/addon-info","version":"5.0.0-rc.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.8","@storybook/client-logger":"5.0.0-rc.8","@storybook/components":"5.0.0-rc.8","@storybook/theming":"5.0.0-rc.8","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6c1d4183d3608a3af6328e6d4aa706d2689a0320","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.8","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-u2vkxNALSaqwveUaYUK9HwhM73vOULuOLw0AT2dgkNTRW50aMeeHgvV2Z4COn23/6xY1YUmbjrVNSe7lnL4QqQ==","shasum":"8e0dacb4f64502df92874f47916ba65cfa68d9f1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.8.tgz","fileCount":64,"unpackedSize":742925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceWq7CRA9TVsSAnZWagAAAxcQAIsOZ/AoGQG6doyCDbzl\nqna7Xo/0VXTvrTyF/raHwOZeBuyh1JnF0nxnpyBm3Q8OFNAPugltik295P+D\nRIFVk+mvfxlBrjIls3thMYemx5TaXVKiaVg0VoF4RD79IqeJ0wlS9nd/ABfG\ntWFod75N/2Og3cY2M3y6EsWMCABmW4oL9wpcISW2ODLAG0UOXzHTGUdSL9bV\n5ACQ0btpUeq6h6gJvnEsFt0+3bSOJLOD7qS9ARv8kqR+5A3Db8pWm4SwwESh\nFkTXNw+TaCkn2uLoDJgCQwCMvTNvj29yGFmbLykkBgNGx2pi+/5cw0Kc8cno\nAqs4LW7jj7UQho7vlYhkiaJdtZy5NRO990SaEyjltRqWV8+2myhaieObQF7T\nA/0zFBccudxbg89EstTipmFsDUKxzJRvmH53CAmxEzF67Z6pVvQhZ4VsIV8n\nARRHrsnfSXUWGC2IX9kq3XtngbmH8K8sIrE0CKZviOeuEZ4v3wdoDTP/s3ga\nzTiNQli2ExMCPKMCJNwQvvpytBU2Qeo1vKCl9eRVLi3PtuwdFNVuYyZMHoCx\nVqvephF1+NI/ix86A92kYVe/d9uQZ8Ei4TCU2AUW28j2mutxd1tiz+vSqLh9\n6fgu6nb7peIDhyiomjs2YRSVkedi2hbydFrWEbtg2wxoTYayzjPGsTFcjNxg\nZ8MF\r\n=OBGD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzZloaJEu/kloMKM/iFnKyKyv5kuhYkeBUYUYN+6/LEwIgWOuwDmXWqzJaEZ3lvbtEYNdzr71WE0k/8tmNGuhfTpQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.8_1551461051045_0.4435775806500799"},"_hasShrinkwrap":false},"5.0.0-rc.9":{"name":"@storybook/addon-info","version":"5.0.0-rc.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.9","@storybook/client-logger":"5.0.0-rc.9","@storybook/components":"5.0.0-rc.9","@storybook/theming":"5.0.0-rc.9","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d782ca1260df341cc488bc9a575c17c4e9e6e0ec","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.9","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-z5ZLUyyP5Q4PwsNz6hoH6DBLhfaPBsWnFJPkmXuwm9R9JZPt9D+FsjSRx4Izo59kDMNOYiYjKDzXuyghxFeWCg==","shasum":"0a684f46a77f21696579c9e5c74b27ba78fc0e84","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.9.tgz","fileCount":64,"unpackedSize":742925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJce3Q7CRA9TVsSAnZWagAAcKQP/RzR/au6wEebXDcOrhqK\nIbSNf7UoaiELZ1umgjWHLPRjNmWt5mOzBfhfunP6qf7NfMqksY2fzvIb2nzl\n7K3d/dib0E1EZuycsXSMpiuqkSyxB2GuAXkWwquYGale8qQYKs3W9+gyIltA\n0x2Rm8O4HANPyc9f5C3OsfsTJd8jnipUe3XzwvjzENdbVp+XuRc4zvBaC6id\np2Bx6PFKA6OtuNh0LNMYu5jgjY32l/mkkvd/Ewo6f8n6vrStOAbrY4viP/Dt\nNUIApRwNJ/AEkLZxQ0o1cDjaZM3iQzjq7MFuwxdh4k/bkku63FgffpMOlQWM\nSXDm3U/ImtKTk4ifJz322+FFTq83mw2268vpAyod4YQGKhbyp/0KPJsQxfSm\n7GrDMkZMdM+ZbIrOgaCJ45UYRzsqO8Bx61N1gc28DBNAQPV2XbcOoXLxKHMr\nmAVpspifZpE6wvjGOprdoVAZhTlO5tjMmfh8tJ2/XDBKgu2/Z9ns/VgRlyTy\nxqqnM8e7fN2UrIQOAKgLU4YpfIsnBPVSDKKZ01vrOlxIUJDV6WOfP+ZrvOzC\n7kRwHRlzBbGmmgQ5dgWd+UM5KG72f3nqPsqf+z4Wu/pZqxlsO4dcUTamhgTM\nMzA/VKcHA36/CVTAmL4CRJ0XVImv+S+BKOfGhoQw+JfqyZe9vbt+RU34RAr3\n2QG3\r\n=/NzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmNLeOMVb+Spt+G86cDvhHB75YIPH7sYHpycAyPpNtnAiEAx7F7FO/gD9jkI2dQWd9iwXNccMGOalPao6E57Eb+NBA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.9_1551594554544_0.9208735596784028"},"_hasShrinkwrap":false},"5.0.0-rc.10":{"name":"@storybook/addon-info","version":"5.0.0-rc.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.10","@storybook/client-logger":"5.0.0-rc.10","@storybook/components":"5.0.0-rc.10","@storybook/theming":"5.0.0-rc.10","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a464c6b23689223a452bd6fcb9956273d9b56023","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.10","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-rMI+E3g1w829pEgck9fga1ZnhzRJEMBy2ufEHNNdiWOZd7YO2rdk/yzWTRcwqGJsOBaitw7YgXxx7czXhoU5ow==","shasum":"d2ffe0be4e7b67403a744518e74cf76ab33b5913","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.10.tgz","fileCount":64,"unpackedSize":742930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfMZqCRA9TVsSAnZWagAAK7gP/0A2YLSVtP3/U6q2VcwB\nB9bEaNbOwDBfF4NwRjpny7o1UR8ESaYbiTEpbj6xhiI8T7i3efQA9EP+QTm2\nWVYv2mF8xJOhyRChzjzJ0gaNI6Kjx9zujwpBcjtc4E501mGtW2pt/yF9Af6F\nAmJJ199DOvovoohBxDyT+1XN2emFvlnfJW6QjPkNs/QB+YrzXGDW+JSMWg03\n4+uNj1OhRf0vBTHT5WjH8tWCYgagyZeaD+o8FWUmfRUhKNmtWsdgdyoFgH0E\nlz1b4U025Eml8yS11Elg4Fp+YbO6krD/8s0WKE7rfV0u8CtZt1ygUftltc8r\n/6joifSm4UTNZ0kPxZ3ZSSFFm67LgAIRa+n981PCL85+4N8cpZnzaV/jMx6R\nT9j50CfUZyFjas5gA6l6s7qrVtw9lm51/W8Pi+QAo6CnBnr8fC/vs96X8+Ce\nAZaGUyrrbGu+fkDAiCWq8dP3EDs5DkCVQHlX+QDVOVdpHnYuy0pkSPFisF8A\nP6Psln89S10C9g9OwMRuoDOGr9lsWB5VlXt9dpapwkmWh5uBETaB/gTMXHF5\n04vpV0uyERZG8YRmf0huC74ttYr6CDkoEdTXd6o6PH26VKcUmrnBilIvcnFI\nljwJ+jTjaOusYrAFL6AzywxdranSQqoJpWQuk5XXU2JjRUGLpBBj5BoEfgWJ\nwZ0R\r\n=BPvt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdn29/wVAl8jH8i40n0yEdvEbSvxgFHzNjIGJmpjYfNwIhANFJQ+0MhKNg3nu1pO6v/17xluG1Gish0hgoF2oSW/Mt"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.10_1551681130171_0.029285984525459385"},"_hasShrinkwrap":false},"5.0.0-rc.11":{"name":"@storybook/addon-info","version":"5.0.0-rc.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0-rc.11","@storybook/client-logger":"5.0.0-rc.11","@storybook/components":"5.0.0-rc.11","@storybook/theming":"5.0.0-rc.11","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2724eb7c21d0d28e9a5cf0abf314f2314f32d594","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.0.0-rc.11","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-6FyjkB9PzSQfx6LWYoFzU4gK2/HEmLC2TscP6m83ohhfQts1KIK2lK1+NI4MeKjSrJgGYupa0wZj2Fu06J01Mw==","shasum":"cda9d042abfed1109fa8c0c0e2c1912dfe07ba22","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0-rc.11.tgz","fileCount":64,"unpackedSize":742930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfdxTCRA9TVsSAnZWagAAL84P/iwpd4Tff92yVb9TtCyf\nZM31StwwNZbGaIWvHzGETzlLuF3U8CQdQfsy2m26Wj4IIxdSf0ysai90uda/\nQekzfmFlTD7234eN3gaqgOf3hUDAZbtxJuxr9wi4VJRYhtItgoVV1tpik45B\nDH6RjZR+mCFnEr0TzgR+x30l9mup4pDlwKacifGeiIzf5arUtcwLf75fngQT\nMhTSlOzhijGTIweVkCmB2wZW0NNDqo5MbPCvC0Ubg0UzivJoQtBjB0y4l+iX\nErjIUw/pI9oFluyT9ZxcC/+q0gV1vSGEi9JH0HQtxYSALpvPLMjyH1yS5QBd\nUef/70K3+h52LvCnCqRqR+B17tSUnFfUWdoImDns0WpW1yuVFejEQ57ikt2G\n2mMAmCO4ofphoEhI+5B5qBCTjSKdU3Ml2XduxUPLJBPIC0bQ4/btwwXbRRaV\ngfVqTNWgiNkAMTLBs7qhFhTj2Oey3LBQVFlCcyzOdLU8sMhT8REYKH8eLUaD\nAb6fJSi81zVh8klwr6jLwVNW74X6fvAE392FmK026xU2WbuFcNx+579S/l31\nvBo9hzq8ms0lJGZfbUa5dXQOSN5+AQcw+gcmfFcVm1Zkl+WeiZgtdGrevVdt\nv8vO5yONEE5k3vdc9FFF7MKhTtX/9TlyFGwoEGHrO2HeGKbTjEZgNDeIZsci\n03Y2\r\n=nVK5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdi8JSLnkESqXuY2IFUNedRH/aMGTdkOSk6b9cipI/NAiBfByf0CbVjURVThzHmLLazbEKKJVEBCLjMJIJSyzuT3A=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0-rc.11_1551752274495_0.8392895157056759"},"_hasShrinkwrap":false},"5.0.0":{"name":"@storybook/addon-info","version":"5.0.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.0","@storybook/client-logger":"5.0.0","@storybook/components":"5.0.0","@storybook/theming":"5.0.0","core-js":"^2.6.2","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"670a682de384dca31c4ebc5c61a824f4d241f720","_id":"@storybook/addon-info@5.0.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-sc2Jbuk/McBUm+NUVtyLpDwGMEGwfkKj6PLeqQRChhiGQjYPlna+w0s8ocQurscRhL9x5MVdUphmVBT0a8bgaQ==","shasum":"e983613b746a0efa2113dd66b62577777651dffc","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.0.tgz","fileCount":64,"unpackedSize":742900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfinXCRA9TVsSAnZWagAAE4MQAIpzbqN9m4VElZc9Xa76\nth5ox3HkvnsnnhPnEYMPPM6JKQGeLz7tw0bfRDwE4RXcPUQdjB1fYYa+XooE\nByaXXI5L+/MDPifS8Vu/s8FTv3aSy/3ZBOpYE/YZrZHDNGa2Xx8hJrLLHtRE\nZ4rJrR8v2JBfjuSAatt9Sr+iCycW2cB6g0d6o0xJEyoIZK5H6mIdG7DqCTLS\n93hNIdZqRFy91y99jaYSZcaUND1SP4ALJrjfsrwGjIYFuEScbH9m+kx9ZXMV\nEiMiDy/xWx+IAi/5AVsYpbKatUKI+/C/qTCtLwN0emg1Ylj0DaBwbCi7/CVy\nhZLiA5MR7vzWi1QT7rC1Neg9RjYiH29g/t1d6nmrRsqkpZQqeoF4d56lPgrx\nmbnA2uvIMA2A4RAB4PlInwsH/zg5scOpTCL6RjWm+hzM7nVrxTC4PQy7hnCl\nqTB7P2pvFn/WdL1mRucDY9TDAtnk7Vkb7D0ru5eCZxC+sdUrX5qNLvgAr/5M\nKLR1mjCk8+OvcA6t4lR9zXrmB4NQvVIU2gA0YekCAwvymEEAu+fsUnczxVeF\nvzpJoZ8hQpajF5bWN4hG8Ls56OSR5LDJ6ksXvUb1yqs1m58vqrAZlfIOmEQW\nuO7Ue3Mtx1uCeC4WnW459vKLJdOcjzwlgr8vtl+ZoTbn7MomNmnIFhwtyy9h\nSTkT\r\n=uiFt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHZ9897aQjtOcNfTuMxOT+DQaKnTA+RA6vwsLvWFNI6AiEAvfKXkQsPy4ozRCk5M9j3plWR2eLVpwOPtzxXL0ZErhk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.0_1551772119289_0.12070343248272608"},"_hasShrinkwrap":false},"5.1.0-alpha.0":{"name":"@storybook/addon-info","version":"5.1.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.0","@storybook/client-logger":"5.1.0-alpha.0","@storybook/components":"5.1.0-alpha.0","@storybook/theming":"5.1.0-alpha.0","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a05491b07af8d56addb15a1b7599c960b423af75","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-5+IUK7osdNUTbTx458M2B3Qjdu4SBYMCSwQAS3/K6qDZBIYhAQq9+vUNdHIeRdaatGExIkkIoVkIXFpKLBbyRg==","shasum":"8d62c6d8626c41ac91efc617e661680a7c4be8a8","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.0.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfzPrCRA9TVsSAnZWagAAgzgP/Rc3y9Sy2VLwMTYmX1Rj\nIOt5iUooIE5DEMODyJJKO4lk6rhnB8QxTwgxuK2YHimS3ALSquU63u0YEhkU\nquo5h/PnRt+jklN1PVXF774n4/JEN+a94X0MVdgxLHY2fNPJ37Rv7X2NrdqL\nSYL4W2q4whKrRfGeSMwYTHhZZgyqxtIRPbwMHzE6GFAEiVR3QM/+Cj+u9/i1\njAW/0QnofXHn/+xYxSQe1VatUsk8K2i9VlzrB/a0w+fFlYAvQc673lvhQreW\nlbuSZQctBb73enFB/YzbtuF4wIgGN4OALK79OOWNMDEFaSfJOxDm2wYdHuEc\n718x9zKbvpht7RHYrV6x7AzqsESc1bwXzvlz3SisGwXnbNTAxyQ0FeBg+4SC\nnmPV/UlRxJF0TRXRf5Op6jsTycFoLgHNB01fFucHXaBhz4E3rgCdwLVd0KcC\ni3CjGqqGOjTeIOmgA0ZlBWkd1eT2rkJYJDU3Byu01ooCqjobwd9OdNfr2Bhv\nn5Eg4qUxg17uw1eHAi3OqkjCy4QY7v4jreI7h24fZ/VA9Z/cvgRxlyGmGtwP\nA9FepIvX4Nzt7ddduBrgfpyWYsNc6+UyVRcEi4rzwE/msfBoT/duh4fw1EXn\nMKLKJIxnBt2vpiRn5oHPAM6b3Mj6/KpC7uwriQ8cSSDiJpO1N17Owllm0CKu\nXNbD\r\n=+rOz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYiQ9wBIwrS3PuS6OgYHUuMTIDPGZGe1o+ELWtIHFVmgIhAOrYDUJ4RL32FSMNj/yAQoc9tyUncrHpOm267UaHfIqm"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.0_1551840234506_0.7607987588805198"},"_hasShrinkwrap":false},"5.1.0-alpha.1":{"name":"@storybook/addon-info","version":"5.1.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.1","@storybook/client-logger":"5.1.0-alpha.1","@storybook/components":"5.1.0-alpha.1","@storybook/theming":"5.1.0-alpha.1","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ed9b342742fadd5005f84bec846c0537bc13b4d5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-JGozoSy9cvjfyBt1/i5vbpBXZmlH2JtrKAIkQz9mxs82TypjsrVKX+++XiUC5HqDzvq2Qjou5qrhvQdQqNBUPw==","shasum":"b311af6b08b30a4340a8a627a877ee433ce8bbcf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.1.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgSfcCRA9TVsSAnZWagAAKbIP/170KXhh4FpV6fC62Yzk\n+IboPAto3tbgqae7jMZYdtMITBvw7iNB4BG3boO4skHbSWxdUc5vKFEeeKCa\nitnuZr9a9X04baiB8Zf+WHJbJuuqHv37pdioF8G2fOKkqU8MB5wJ+pMJowt1\n0vdoOGdiSIifulVJk7mfFA+zSyTvc/QReH181ODyDwHMdz7vjDMqCA8wa9Fu\nA2H5Mn07qeit0HhGlEKnwoguA865V0AcMGXTuLLVxyE2UKobVFIhl7z1wAMe\n1sneXwaJ5y5wh5C2vybc6v4ynJzHkwXKJS5TUWC8GixQrSccZQC5J7rvp3tB\nmSs3bM0ZqM182i6lTKjdp4qPi+uHO5R+a8gV3TU3rA5Byq3oiVX7dw9vJUa8\n1zSKEG3x6oCvHH19ob41/HYGf2y20XUu/AMTe67Ks/GYs9fy4dEaF7Ak6skl\nDAd9e/uPwDqxsIFMRoPRAbZaByu0nUZypBFQIowC+P1gELJrQH10dYwdxKA/\nkOxsY5ZCBk2jUnD8wJiV0hD/gZvFmgLgF4DUyakiEGldIdiatVJRgjmRuAEC\nlOqXwuCe7QmejlR1p/GkDEJdyVNshSMUGypFtWTavZ9HxzqX9TUxPXJZkjIx\nt/imYh4zD9qzcwYsRe0ujFnxg8kmY5mz5C9CgEEdiC3h3sTR6HL2ro+HUnEE\nz3CE\r\n=75r6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErX/ZpqFZ8nvVeA82kWWyAg5sAJ8Jka/kzLVZx3UZUnAiEAgoGx53enIHQVnkmyzFJqQ1B7UJGjWThDQXbIRnF4thk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.1_1551968220175_0.37556834379914705"},"_hasShrinkwrap":false},"5.1.0-alpha.2":{"name":"@storybook/addon-info","version":"5.1.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.2","@storybook/client-logger":"5.1.0-alpha.2","@storybook/components":"5.1.0-alpha.2","@storybook/theming":"5.1.0-alpha.2","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"394cc916377ea71bfce7f3d9fc1e4c9f154f02bd","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-RmgwxmzCcNwoHPqRe1ffqeGeXREXSc0km7a/4J+t4/e2WVJuQXRDt0AL3RUnKj4FAm0mrgoyRdAdjnSw3y7EiA==","shasum":"f52f30493365f9bb03369c1a2c4e3fb5f795f3e3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.2.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgkZ7CRA9TVsSAnZWagAAMsQP/j+9Qelsu6Smyjoer3E4\nvewuICQIKxoOICtO7JIblZaI2czvnRimyo4sjroygVty7ZNbpjrlCsuUXEzJ\nMTzQiFvpzZAod5Y5XNA62wOTWwLYl9uBQnSJPe2bU1gyVJrQZbGAYGkukKuI\nZ8RrSGfU51qR9hwmwjKJqUM6VBjrKVJC9KXQTrX8DSLH7A7AFT7ZiWWT8CLy\nNFKTgXYhYsRYZDlzJzyONb8vvm9Vg1aHlU83t8W/4T4cLUFD9fvJ8pRKsq6E\nIkztdMKa2DO9+ahGgtJDXKVblUbT7e1ETHZPPfkgtSxffVtksyQrH2H829K8\nlH7SRRikcICvU41LI3o7fIvWiD4PziUMv3cusmfooaUcFa/cI+33menQTCfD\nzxHVuvAgF24r4Fyd66S+vdSEEyxwNOCKcNs+OAMAfSbyx3jXCx99mWR0j/Ax\nM+4/buOaD0yCoIUt4ELHC+pxcgmDX/Wbo0x17Ow+9ArxG9co+Wvpygm2C5gV\nUCgkiuq5vDknQnBucQAnlGZ/Q6SpUxa/phqyDTATY90FWeWtJR8Yn5VbtCL+\n3QurwRvAPMZqrsLjM0aZgiXSDoTT3V1s2RHAPCH65mU4JVwaSN+Xj6QAntBv\nnyl2HrjqPe9R5bke3/AYpp5I1MA307CUNzj5s/LWhsvViGmsmkGasZPt7L8X\nLH39\r\n=kpTN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0Fw961EBMYn0eIKc8MGQ0hXob4GWnTp1bW1F1rbbXfAIhAIOnzAEuqJ98Ikd+DGKRF7Ts2V4gCa/h/D2qhCD+Crqm"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.2_1552041594804_0.2175588567420519"},"_hasShrinkwrap":false},"4.1.14":{"name":"@storybook/addon-info","version":"4.1.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.14","@storybook/client-logger":"4.1.14","@storybook/components":"4.1.14","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7832101492d80cf343d0e3c2d5a062f96eb3f2ea","_id":"@storybook/addon-info@4.1.14","dist":{"shasum":"d0e155413881403e9dd0bcba04a05199141239a2","integrity":"sha512-PcJfcZ0WnC+mr+AIn1LfacjruG6cLnCC98BdxpdTOMK+nncR/JffJ7ySqykFEnwRfLuSHGglIg+LwjUViQ4mwA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.14.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgoduCRA9TVsSAnZWagAAJnMP/iZQCshfoaveOq87AAwJ\nBCI6nud9+GmcIh0ZTgHkB4ThrJn9PN6ZX1XL4wQEcTmB9yFJJ09sUhU4VHc+\nEeuaPhWc5p+Hhv4hptCn0nnH0TWRMFUhjoWcgLW3X0SUVEK6HaBUV9YPXUl0\n83VV9JKPB6XjwgHIPRposytBC1rUwe7uBOPZt1ikzImbfDjG8WnKGGQ4HaXp\n2yhocBZrd4fvDjgoZVnI/QsUwg6bYkrBI3/x672/e3V6bTpvV/exXbtZMkq2\nWHJNNUaoz9DoxHwJVZUHSTQitARH6QsWol5gzQi9e6xc7yVuUdIK3sCCBxBP\ntts1oZuC6yjgIUw19QUuKLCDzPbmYjHc7w4jWRXS3X/NSa+QqHW5pCwItTM6\nHfcAEC0dB7ggRXhnIxSBwkMlPB60krMYAXBZm9pFBzHyXGb4esiLLqrCdjp2\na5JkDejrq1Z2kPwLgobbvrjW6OxfkKD/8yGOAlOTVViDyKAZ7ASvx+r1rxdA\nkgrdsdyuJfmXpPw9ef2Hxd2WXDbQcYJXdGTz/kzWzaWiXKsVlK1FFpiKG7S0\nT0SxUuuqg3UDMHFKYjk61tA9+0Ky+ndbTyyFyVFrgZYhBG1KyH3TKjvOEn+6\n8LYxPpodGiQErOppRfM+LbxB7iS5RKjCxBTgnOObRtUiw4AL9vdi8HXVbXF0\nW69n\r\n=A0Tt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlg6m8257cVacEblY8XmKG+r2U8tdVyf1JrvFOipdfggIhANTePDnHq/I7uqEE/mqU30HPJ/Gd3a0beproCbVOtva5"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.14_1552058221047_0.5321259727011485"},"_hasShrinkwrap":false},"5.0.1":{"name":"@storybook/addon-info","version":"5.0.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.1","@storybook/client-logger":"5.0.1","@storybook/components":"5.0.1","@storybook/theming":"5.0.1","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ae7a4cf0720cb9d528163f9411ade78aa379708a","_id":"@storybook/addon-info@5.0.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-i4shAaEunsKzWwT/B+kRqJzy4ecPlPtweBcHm62ISOgadiuQ+pwiqS9qosVENBzx8yZ0uBO9RoWpbVZxs6L0fQ==","shasum":"959de89d0c1b24f8d560fac8a44b6d46b4abc5c4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.1.tgz","fileCount":64,"unpackedSize":742900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgpfmCRA9TVsSAnZWagAANM8QAIUyDtoAN+0AWsqH5Dtn\n7Rc8rjZfjVhSCcZx44oW8/O33gnnFKoJv9gaxzL/QLEgWA5LOd3YNdQ56ttT\nmPtbri86Xkts0VjgoVWlf7Zi++yyqBIiHRVONWhc0e+ERZdWM6et1t9gUSwx\nbuePSLLzyQoE8soSt5eM1iHy0MigSws7C5KrlrJzzmJw6JQlB46obpHfMQky\nYS4spaw4qj/qhDO8JSxsOZ4VIEL99Tt5kkGZVitaKCaEY3lrDhWtmUMyJ2dh\nHo0zFL6SGMkocgo2VLWUyoHxtyOJ3vz2DacRoqCyUOFYcIxm3NRz58fgdLmN\nwZ908r+sPy5UIEJTvh+CFKPgcwigt0yEXCvbsROoNOYPQlqUUTjuW7cAtBMq\nbZy5JcghAYGl/1sB0UxKQWj2vGoN0cYlinjZjfyRQzngq6wQtQVaZ87aTeSq\nnVfW0KYC6MwaqqiYHIir274qxd96Wbmsqt7vEUz+5erTi7MSPq15MwAo5CFc\niWAPiwBDnD5g8RuETmWf8ZZLGhuXxi3RbTVTBnfBrxTij4tozlaVWouv7eU/\nQ9QGYkX5dUNENw4ezq2Z7DISAxXBK9JVJ4zE1p1njvXOagN+95jgnHfG+kQa\nLMufDjOKXDfy7V0k/3Ly+hoYCQYGd1mAeFVfmXZFp7GZjT91KjXjCImCIDxi\n+1NS\r\n=Y0df\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRXNc32+E6R7zKsj8m/iPUqf6oUE7rp0z2IuSUevOoBAIgeQetK7tdvlFFtZgRY4pSfuJUoONjiF/EwJOeJS0ZYhI="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.1_1552062437663_0.7558226121828628"},"_hasShrinkwrap":false},"5.1.0-alpha.3":{"name":"@storybook/addon-info","version":"5.1.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.3","@storybook/client-logger":"5.1.0-alpha.3","@storybook/components":"5.1.0-alpha.3","@storybook/theming":"5.1.0-alpha.3","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"978caa74502fd06c825dc78d6ad984e3bca79ff6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ko2HN4DZTyvF0k26LxBc92gpaEnaStAyA1bw6nHXApLbxBmJfj81Nd9GHPZlciTyyI8o6Qd29U6wxTGOBiDJOw==","shasum":"48b2e74ced26e48b7ede8bf837368905c5a91f45","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.3.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcg9usCRA9TVsSAnZWagAABVsP/0L180Xgid7Wed/TXKda\nBlumHxGwE1J6NlqK+zHE0Ps59GM88Td9XIsJRHHYPw0EjXliRln9kxHA2aKa\nt+hTZlKc04iehHP6pznO7X//n+vQskz1z9xDQiRs56agr3jC8RkiTu/wURAn\nV6nmEIHgPucC4lPt6gYuuqGOZNgbWA5BHSAc9h/BeY5Kqpo2A798J63q5uZP\n4YQzgT3jfoZVsjBrX1o/geZrd0dwy+IsWS+lkb2i2uUZ0rtbxwbwClvSO5VN\nEi5ncLjxLMrepMbS9lBtjT6jtIPfEW0+6tJwOhHXHXQ9uHOFpaF2atdJ4zub\ncepzEnZjmAjj0uRpZ9V0e6VMmPtU8tIlNByJS9epsD9+gTwZDQP+/FQWDWdV\nMroAVHp4yYIKq3RU8Q/E8t40/n+gNvBwxUMLpw0wV2HefZ7MvXBy9QVOJV7x\nEhgX/X7ydUVnFeM2JIdEFhfeYKTivFJAYNwjqbG8s731T4WY3KTQy/XOOPcN\na74RH0yYnzUyHiNJAd2KL9AbtuKjMI6WE6prmPRUsSLyjSkZBEd+aIo/RnpT\nTDr4NjDtZHUh/slhP0R7g9Ce56Ko1/Uu1CcUms61cG9rFse4ydzH++HzvTql\nqBQTStHsEfl1/FeIerEsUh07z17+g0Z/UN8pLhLFeUFfWszhPrfz0G3DR4B0\n2gxZ\r\n=S9tR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxSJ4LlhKOes7pJS3E7gkZ3FZd2RIl/sVZ/5H5lZmH5gIgLdZ/UqHj7+Z7tSEIa6s23wN0biSKp24K7mIxR1rUFCY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.3_1552145323789_0.5717889252836565"},"_hasShrinkwrap":false},"5.1.0-alpha.4":{"name":"@storybook/addon-info","version":"5.1.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.4","@storybook/client-logger":"5.1.0-alpha.4","@storybook/components":"5.1.0-alpha.4","@storybook/theming":"5.1.0-alpha.4","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aab869c4d8665b2be3ee99ded272ee2f68825fe8","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-HYJVj1XkwVuyt9LnlXgzrBHvbmlU1+oyKbsfpx93mh7Fu2rQ+6U8czK1Nh64kC38UQQpaTWu4UFfc3FtfAGsqg==","shasum":"e7b7192aa7974dd18adfa2faae271debac17548f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.4.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchnHECRA9TVsSAnZWagAAfs0P/jIMppdfQtXFvPtqN3z8\nfuLhB2VuvcBie2t3t2HbtX4dgA6XlJF7z3sUg/vFsDlgEhANvdm7xuReqPT4\nErlyHjdeumDTKlucE6ii429MsrHv7mb+465QSZM/F721ngsbV309nASaG2vd\nt6I8D9xkgBkMpDNavYHgvbrTFPnGA9vy2YwUHMBPJWQTYp0a4jDpF/zuYYp/\nN6eWC+bNBj/tHJzEjW6dADb1u5L7RE5lxaU+77XLCx1oFlfMoQq6Ipw1LaBi\n+kIh2ayosHsrUO7Tm4bG9NOULFWsbYGjXTp5uu304vWWQk0F95dVgFpezKrl\n19Q2eCnU7kPPWilYIHttdoS192naxBwkhPt2gUzAyD9qN98UNL6T9yCvwLap\n9OIvD5h7Vr7kKSO9gnj76kwooQdITEIA2M7Fq+9rpKxL7GYliG8vBhDG32Ba\nwpdTa/Sz2LVz5taADodPFKjJ+7xP6os9sHlhpLJnIs8aHYYX1VgnO7sa8ofY\ndZMPh3+j/AHmRD4qSYRf8FkqJetSU53/cZsfoRhLypU3DM8hsxq4sQNujb2p\na8jyNL1ENnAFHq5kY2MIJS0o77omfvZw9D9EphTb5yyPIRjoPCds2FB5MFWo\nXg9uDQzFL5cc8vJuSvdjCcOl13yRUQQtZ/7/+3dAcXUAhcujd0K3W5dUZcYo\nDEuX\r\n=7wt+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmIAsaycI04nt/g3eRZEiCYHzs+LuYgzy4AVBuNVdtGAIgDrmIAuINGo9/2JFou++WNSKPfn2ja3Y4h2C9D51rLUo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.4_1552314820085_0.310151822949436"},"_hasShrinkwrap":false},"5.1.0-alpha.5":{"name":"@storybook/addon-info","version":"5.1.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.5","@storybook/client-logger":"5.1.0-alpha.5","@storybook/components":"5.1.0-alpha.5","@storybook/theming":"5.1.0-alpha.5","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"81f7d94fc5e6f9487eb61f7b75e5fc4ae8f9b0fe","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.5","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Xg1ZYrSH8jUSQuAOyMS8Uh7GEXuBmwSrS+RwdWVLGP52F8cBTbaG8G6RUg461S5vdrxRv+Y5oM076XtLMVjz8A==","shasum":"4fcf090ef35c23def1cba3b0ba0bdec2f4171ab6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.5.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciCStCRA9TVsSAnZWagAAFbIQAKCsMtAMlBNlB6/HVkfP\niJa0AarRJPGL2b5gakbuBZ0T50tmxDbtjcJ+YE4uhFIjY7TxAC4AAChXpDwU\neBhBj5jBMN/GJcZSa0s1WHGB1pLQ1YviSW2AmB80reTC2RftdgK0hIoyMh+v\nyrNdRc6T4Sq1fL4nWfrz4rMAlu2GTP7eA00OFz1GFMIjzBwhLUWt/jidGYt5\nkqkiX8HjzUbj+Np8SA94khF9pwO07o27GTvRZDl3iaSF3CiWgJLkujE6BHfZ\np0z0rRAxPAftGEQT+tEW8sHnhh4Fv+7aISF93QaQY0mr0BXmDm4nX/profJU\nxsiKcgPljlrdQa0/nGgUgRr86SAxVbKjOwkEvHDzHVAT+3MrQYEBEEeMdOIk\nCfGaGBuhBennXbQZrQKyvVscVW1IE0g1pLPIJeJym19HskdfnJbDvXmiY94Z\nlQACd3RuWM8fG9ejld/ueQw+k+ukhhGeeWz1UnmK0/LwAQvoMjyCWb17hiqQ\n/gaMIwFUEX2h6bHr0vO+fazgGdbTZMJ4yphrTcfPI0bz0LQ6o98twNLU+OIW\nQ64B0luxRFP75+BYm3R0jaUAeIKg9eGoS0xFPX6ap6kCPn6xKSPg+tWnqACt\ntOxLk2wU44afl+lsDPCkb2qrgLkM+uXKc/yYV02zukfeH6PpaH8wAEyBWdQX\nFk2V\r\n=K9HE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgt9c2EjnZ9POeipx3iEfNyg1wL+RIRcZOEwEGB8DpqAiEAxxs01VTJKECagrMUR2ZLrpxfWtONF3Oaep6jvVgbwY8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.5_1552426157350_0.5999783277782742"},"_hasShrinkwrap":false},"5.1.0-alpha.6":{"name":"@storybook/addon-info","version":"5.1.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.6","@storybook/client-logger":"5.1.0-alpha.6","@storybook/components":"5.1.0-alpha.6","@storybook/theming":"5.1.0-alpha.6","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"daccff8919b470879539a45de09f22168f666230","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.6","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-IIlfx1S9JfYQxpFdj7pCTDX+Phm8x4j6NX/S45LgKa5gnuYel7wuxN/ZwNoCMF483vI/lcXppLQ+mFbYCGTZgQ==","shasum":"8c6dbb799b0dd6559d03021ff12ce647623fde26","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.6.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciacyCRA9TVsSAnZWagAAbkQP/A6D1+ySopcHZC6SixmD\nQrV9pUHZ8pmu5UY1x5Ulq+4Ws5uMBROkoQloRreo+BuKjbIu+2ItfOq9oLl+\nSmOEPIH4HNIrxN5tRBb5oFEuQ8SYk6nxAV+LSup0RiE9BGD0CCI9zVIN0zmy\nKA9vcUaD1QZnsREhOPGSGgA6HOcL4ilwwS4Yq8geZWASYjrFK+EIUqWSpDbB\nI0gfdwk3d57bJf4ueM/kubXfL6KoyAJYtGFf9bsxL9+ZVPBLptoFo9cXWRSr\nY1wVWh/yYAmsZabw3vOw0zua0tU0fwyXMbItslO80+imfOw/ftYtMFpLpHd8\nzJYr2Cbqsy732O+n/pzW7h63D/gVwux/mF19B162wwPgLZq5bgUb/UtgwVTL\nXwc/dtpzQ0YTzHVMdBaKD2Od6QtV8IYGLyJXmXDpnBJxPGjmrX8Dwi0E4ju8\nOwfMJM65QaqmrXJ6iJak3av5ZNfZvlDBfeyBSvqg8BYE0Hm/PHsqlIEME5EW\nI2fjXP2M6BKKeFi7y9N14WoJUYozuNnQE6I6uhBZ3TD4wIR8gg9rkB+402q9\nW2wXtoe1SJUwruPdH4RTbXYVeKqWooA4aNoOxFlmbwEQY2LQ7/dj+U1mwyQN\naMzjfItjaohrcI3acVrYrDEtpxbRk1ZH5hHJljPHKWPibwQVnNruJEepFp0/\nczjd\r\n=cd/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAiAWG4gJO0GAEh/ikYkPlE+zxqY7IgyeVCg06kcTK00AiEAgx9n4qKnN+5xidSQ/EoMgPr7sfv2TsXIOgUVDv7pPq0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.6_1552525105354_0.23185137827443647"},"_hasShrinkwrap":false},"5.1.0-alpha.7":{"name":"@storybook/addon-info","version":"5.1.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.7","@storybook/client-logger":"5.1.0-alpha.7","@storybook/components":"5.1.0-alpha.7","@storybook/theming":"5.1.0-alpha.7","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"76e5df9ace362e3d6b8b8198c03aaa2b0db3d48f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.7","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-FjKshmgy8Litd38H33QfXcHxfLk1RnSVsdxooq7M1jnZ/xv2fK8SaNEbczyvOjqXEOVR4S0k4HPrjNOvuebKCA==","shasum":"969997384a9759fd079c682977b21cdf4caaf51a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.7.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjKMvCRA9TVsSAnZWagAAsRgP/0l9oOLgv5iUZB/Y6DCL\nThd6nnTfRNGGX/J+EXR8iw5VB0msVQdF72ujKCaFu9f6bxSKQdJ3DDF0tdUk\na5VZS3Iq76KGiUd4PG7YXEyFQPVYU3SWii5mR6MuCMZwtHJtJ210R+Lhj5lH\nMULHyEVNScQPSwrbtZYeKpGz1fWRA1z9mXFIfG7BcjyBMxYb/g6r7joyVWU2\nft0dK4nUWmHi+YfSp/mO6qrnXtRUZ85ky28viW+p+YH8e+w0NbxX+8D/G2DB\nGbxnU4XqaFWZMvYXMBXlbfJbjosTB7QcdE4jv7KC+v+KKcmkgTOCvIhcWS1W\nhDp921MRqFAGkT5K85klpiTqkYDrNzlvt7HJmNrHbOZYtrvQt+jy6TCSDQDy\nzX6toFoIqrBf8Y9SE7G6ijVmVNvV5L/uzVjBykz+PjeDFt2T5euaskyQ0LyA\n5YS4oSXlEXUav/VDLKy8v8AvD1zfSfj8pBGvGk4lsB+7PFoFNB7kZPx57k+Y\nlXzdJS9qg/C9UYP8EYY8Qxrs1wBVJmcA9bc3wKx89r5gljzZtM4hav1eksTf\nHDi2j/WeI+7NJKnBl+v0liTgxkZwyNsXcH7mweARBGV1H38GaEqJvnIv52Hh\n6/0W8/VAtXwAraU/htd9H1ImYu+misRWGJUm7fPnW9jZF27D2lkUjbM1Tf3+\nN0ii\r\n=5sd/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCy+CzALr4mO6i5BAv5isWj1pceT/TgiJS64mEV09KJcAIhAKOvStFf9mgZmmuosmZacrpaiS+LHCoIaV2zGrGHTNrn"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.7_1552720687003_0.6187157630195081"},"_hasShrinkwrap":false},"5.0.2":{"name":"@storybook/addon-info","version":"5.0.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.2","@storybook/client-logger":"5.0.2","@storybook/components":"5.0.2","@storybook/theming":"5.0.2","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b23f97ef2c32079cffdb9109f8923eb654f4efb6","_id":"@storybook/addon-info@5.0.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-QpTKwZCIgVHILLbPJDSPmvA5nf3K2ZjI1Yf6BrluNYRZJELG3n2/aRYZmvJY0SHD74HyOu8nSRjhbmQGGG2VfQ==","shasum":"d097b1e7fc2d4952c0f69bf5877a150fe7fcb216","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.2.tgz","fileCount":64,"unpackedSize":742900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjdU5CRA9TVsSAnZWagAA1awQAIeVVNLcQ7dw12DoRTsA\n3rszn92PrYFvdDs5r61qpt0gZBG56OcHRzSgkAM8eiq7ndX/WoYPs5PFa5IE\nZJ3GEA0B6rNEQw9hWnopG/zRZUgEx36YKMiIVr9rM/evImhR8feFvTMnUQzo\n3r89+33H8jp3LJSjtAQrDgV4gLh2dW+udnokNyvs/B6Bt095nTla597RYez0\nO4DwsM7Y2tnxI7vjbh039wxUZiWSAUOGi7N7LAht7dkV7qswwd4dytDrlop9\nGOIV01iEcgQHgPZkWD3Nzp/0tdKJXBh9VVJweLYKGsOXDNmr3Jz9XyFARZe2\nguZ5lI5YNj0ru6w7jb8AmFhswzctTxqDI8o72J9Qhp6vvPMLjQB4UrkUee3B\nrW9DShHiAgkuJBaU9FLEeOm+T6JDIvUesTQJWqGhbqEVA9q3pXKOJ6Rcamls\n8XNid0UX/J4fN45Ft9IP8AlOfZr52woE4Oq0MtTBZVdn8HiujJNpzAt5MsJo\nfhDU8cqNCD0GDvXKeCtMeeVq+OjZhOUyXcjbKn2xSMey1JoNp55A520DFj9B\n/ixuJRKZZ4GaWfXqlN1cUpic4SCugXQECm+tKmNBzxohDlOt2z2CBLf9d++J\nUqPd7u0yzTtTDckkp3jCixlcUGLkvZhkOH2xPaWuA+2JgSBiNSu4EpU1DJ+n\nFYnw\r\n=+6sS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF07VVaIYVAQPy5NCXGafQwwRWLU+SuuE+jaPDuGMlAwAiBFZKVT6yXBmOeFXP3lC7OsIgdHzg4siG/PqXd0u0ssBw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.2_1552799032880_0.36678496401304317"},"_hasShrinkwrap":false},"5.1.0-alpha.8":{"name":"@storybook/addon-info","version":"5.1.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.8","@storybook/client-logger":"5.1.0-alpha.8","@storybook/components":"5.1.0-alpha.8","@storybook/theming":"5.1.0-alpha.8","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"eb9be1fdc49a2e80a744aea9b54437a2148e33db","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.8","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-k/jsp7TjCyT88beyTyEcsLVhhOIp1wgwrB1AoFOf7gxXb2VOBaMvw4jmtDbdsBnMmpCZkl7s6b43onYK3B1eFA==","shasum":"1825664772b705e0d4a6ab7f1756a0f3b21a0fac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.8.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjmh0CRA9TVsSAnZWagAAgcgQAIpyWF/qc9ee7UhvadQ0\nfjt9m1qLnSx9mvuRCG1b4R3sN7Hht+O5g0iYebENAL/cJF60SIB9WXy7eC2L\n6F3JbGz8lvEHYygqtBjopM/OZ1+FNyjkd+Go0sBiGJr8CeOcFB5TN7mJr8rO\nGg/aXM97JjkjGfEvI0OIJI+trCISU+XGt68i3bBOz27gnWRWp7Xzn/Lh47YV\ngQ1re/+dxSpnUuQMUBKt8yE6YnTD/GNeL+RURRgoAasxsSiAiOj5EYsTRGaY\nc35dxqbfEvdSWR/7T4xqeeWCmtRq9EEKk4qobvZFBMcMqmIAQLnCJKzvKuQE\nx06G6eMmgBOgtUJ6thdBnzM5gQCEtLXydPlEsbNjuIhUAlZ3JFoAZKOc7prh\nTZ7qLtzCwz8Jpov264Mw63CK6sAXSXHAljMTY+zLx2FIazr0YyC4qA2AKTUU\nxvNo5nQTTZxauwFn+qr41SjJjxA1f5BslC9qXgegh2xwjgZZGCT9kRM6+6Vw\n3mEggjgy+UUpevxzbl6ZQ3Q65zpRL86PR5dRKNqiFxErstFunzDs2gP72XBI\nKGOPT07wyN9QutLweEIw9GdVtoDPEVbW24CT6qs9Kp8BuFga2CNAjBkg27r9\nn2RFwD/5SLKltr/BQCz2bdcmwishDFT1wa0Ex58xX+EsQYaLl1K99iuZG+bP\nVZfm\r\n=9rmh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSfQ9wMKBHKq4yAi8VRvq+0YXzeAZeOCgPYtHzKG9reAiEAh1MBiTk1ukiL4K1/KlSgd8OJ1FF0u/096waUrYNazRw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.8_1552836723691_0.051675087486032556"},"_hasShrinkwrap":false},"5.1.0-alpha.9":{"name":"@storybook/addon-info","version":"5.1.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.9","@storybook/client-logger":"5.1.0-alpha.9","@storybook/components":"5.1.0-alpha.9","@storybook/theming":"5.1.0-alpha.9","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b51a247295aca9ae33eb98b41cd52abc6f77d844","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.9","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-m+QjkvLS3H4hO1rpuvRlsBQJAneoVdUyCb0M6JV0IjO0PrMW8TDFFzOWmsz2BOMjJFV0sI8hmQ6ljvxl+SVsCA==","shasum":"c529056ffdb0ab8c3777bccd0abcc2c933345749","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.9.tgz","fileCount":108,"unpackedSize":784483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj2XYCRA9TVsSAnZWagAAVWMP/2SauTPQQMHEYQ6nfrw+\nuHIURfFdy7IFejdeQPMimbbPK3oMztejwee9GfAx9JeblZ3pDW3o1aZn950v\nfOGwI2Qj48bsk5vABCvGVU8hB7kYugxXN43oS7ortFgZO3Jr5TKWJpwO5PZm\nGFAzJGTFFcSbTmMtmvF1sVuiEtTwC2PopkNkzoyLs+lS/FXBnZ5a/fpvmiqM\ntE/uum5D+VjWIoBx8vg9PNAzlCO7EOy0Vv+q8rXzlQxdS/YNcQt/s6eXdCyh\nQdDRS7yG91Wrtpq/VNmnglyqvLsI32l9wQZR4R+B7/HrKzN+nqY19jb9OPjI\nn5e7RYWryweysopt/wZKON27QJGHHM6fJEnKUsfFw6aiMFEwpRMs9PAPt/TM\nFTqX/mAnpkYXCnH2QzFv9wnmjIjO8wb4lPgNXLiNrdibfreFeJgmfPo94DQ3\nBp95dYqkHjc7vYcZZo6IrpOemiczt6gp+J/tGOMGdbcekW+gp7RoVL6FZRUe\nVcgunAouEPLSkLAWl5INFsD8jl0rRbFVnop4CEmMY0wIsH/mXiaap5kPKA1+\nzVnbmFPleBHv97t/jw6USdl2doqem7+2dhFCKHjVL3TffL6591xXNdzH0mvZ\nXvFlNTr1N5es96ejDKmku2fad51puKokqCYFX9gTT7EDAOcNqSvXNv1olMMD\npWiQ\r\n=3j1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDlRUjxIVPe+OVCpz1JXpU9zWSSVNH+h0Bt/yE3RUKwAiEA4EnzP0zwjpZ9Sqr9MctXJ+GylxvoRXsTA4wuzVL3GGk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.9_1552901591476_0.570717685799565"},"_hasShrinkwrap":false},"5.0.3":{"name":"@storybook/addon-info","version":"5.0.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.3","@storybook/client-logger":"5.0.3","@storybook/components":"5.0.3","@storybook/theming":"5.0.3","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"22ed36243324aaaec6101ec422a661d84d19a59c","_id":"@storybook/addon-info@5.0.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-N6wNk6P+7NMgOzPfjDH4CLYqAvGGmM0aB+90Mo45mHgIx58ZCSW6mAPd58CgBCB8D4Q2fqneZANLDo+7KtZYFQ==","shasum":"d50ae8b145cac318adf060fbb12fd1a0af27a142","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.3.tgz","fileCount":64,"unpackedSize":742900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj3ziCRA9TVsSAnZWagAAi5sP/27PgD9Osq3/KIIXnjZq\njUX+jmgIYfN+4j/01I0a5axip0V1xCG3mZbjWJ+lj5fm8e/2hgjBpzStvIt+\nlqtUZxsCbG7gBRvz87XctvwUB9IWk29JlPJlUZIj8d09SKHATLFvYJUhCMVL\nDxNptmcf8xl42YvFDIefqAzJK5eBWRwKlwXHDYwQm7KV2oOGTXH1UXFwM3AH\nukyVaX3xnL0dPgGO7qrH61i515//eRPabd2jh+LpzAe5myfvhUrlgcxwfklf\nE1du64/rSvo2PntAiw6gLZws2Eb8RhjQGQzA2Y71wBI4e0Jp05YQggNe66UQ\n41TcLgMIlkfxpeSvYUft4M0MBm+iQaewW3c0j5pkx4ifWlLsay6I+bvkCHlh\nX+K9FfvDHAcNA/zCqCi/UjFV3kdgsp/0H33L0q740pTbq6fpW7C2B9QjkjtO\n3x8qsyM6td0x6wsy2CtPIVxQrM2jiYN2O3U71ioJPJlbb2K2j8U7EuayeMB4\ndMEcJjSDyGML4nwjmGxZNUKUyyLmxAqKG8vyjbbv8VQsUvPKr22WiDaecTk4\ngd3H99ka0bCl/c9Tc9oeQ8HNeE6nNXg5FFfFX87OLuP/29Ubho5dkxcaqxDN\nDaucOXtAp86UhVrGJV+AkVpGQM+RjWWCaqU4cVSge5ZnA/F9xmoCrjuzBOjM\nmVK2\r\n=e2FU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxQf3eAtxpxnpC7JHZcSL3JWR4WjrtS4CbjrUPPJ++9QIgDGQyxuF1+8KyMICxNyTvOSsb+2V/mysT5kY2jRvqVUw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.3_1552907489809_0.08162213690565112"},"_hasShrinkwrap":false},"5.1.0-alpha.10":{"name":"@storybook/addon-info","version":"5.1.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.10","@storybook/client-logger":"5.1.0-alpha.10","@storybook/components":"5.1.0-alpha.10","@storybook/theming":"5.1.0-alpha.10","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5cff559d907931e817e715d0a00821993b6bb00c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.10","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-bFxvLNO1N2Szrz3C1fyxroBYvZB0IwOnqJ4+gfGnjhrXb7cR5lzpDPTsHJYhBR6VLfM/4eRC/1tm4uSGZvlHIQ==","shasum":"e9e1e77d99ef63aa208aa3387af3f122c2b477ac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.10.tgz","fileCount":108,"unpackedSize":784480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckPFKCRA9TVsSAnZWagAA24UQAIkI/6/5rF+x/R6idFXA\nG7r1W2ziq3SEzwuPowUD/l0i92UeaeRrryg/zVYcmPcfgKg+mMCO/XnRO+70\nGfiERAA3II6BI70RcIdfSAJsTyIzimvkuiOR0jy83D8ku2X7HUimVnUVOUk1\nHBZGoQGlrlb3xI2tNWqEkNanGkRAkA8h+z1RsvO+wSHUG5XyFxEuDK2FypXw\nxgdXEfut2KwcTovFdIX+Z/P4my5WnZ1LqIsPbWHBSzg4wr2J9P+8IdvWeAXL\nPHzjWefh1jAPNktCNKqvbNvtS0M+pPYg9mccSqPDmCGfGU3l5oSr2b+QCz5U\nubEE5jBI7u7zhmDLz1NUVr+xpf22hP1IC7WOwqfhSUMn6bhzb/0q4ShRKlpB\nBSgOcVsWyLtfZy27wuO7hZcIrqvaaibMo2N9GU4wusqBOVwnDCMV3Kga0dfT\nsgOKsp4jUcmbH/yc0FCjOjkCyYM2rhWBLW4yfN1lemv63ciT9GkfwWJ0CJaO\nAhA4DiZEjW7MN6S5PDHW01X8KV+wpqugl1+ZKsOHQN5KJVOG9NTRmWnj3j9D\nqxqvjCo/Bi3b1GWu80yPTFQAUvdS5eydcIhSJTb0bC2uK6Zm1G2NxMWWW7wH\n/VOut1+C/GFugBMpR4bMzRVH9YKkmev4UxQw+btbAYM01u716z6uXB3E6zYm\n3utx\r\n=qvZD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8Nxg4FQhB9oyb6JEkSSIOdRQMad/yFyNTWFA/CFDSLAiEAk+3YSKLRBRgK0K4JP8g1mkHoZPJziKKvbBMjqdn/eIk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.10_1553002825431_0.5771748245750132"},"_hasShrinkwrap":false},"5.1.0-alpha.11":{"name":"@storybook/addon-info","version":"5.1.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.11","@storybook/client-logger":"5.1.0-alpha.11","@storybook/components":"5.1.0-alpha.11","@storybook/theming":"5.1.0-alpha.11","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0a81425e86aaef666146b1e8e7797fd6ba7ef9b1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.11","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-3X+AJmufn8RcyBDKOoUvdEsHfEMROQwTzr2sNITk8YOdSQymjcnEAjufaMqCHE94iXL6h2iM2x6yFsNqySD9Uw==","shasum":"ee3ce4460fc1b4da7679e3a2550f8c345857df73","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.11.tgz","fileCount":108,"unpackedSize":784480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckqQsCRA9TVsSAnZWagAAYOEP/RW2Lzni8ifKUT9GtaDz\n4onSVEENTCQr3Jh0HAQxE5+dcXfSPIEVGSOcTbexOpwxzrQwxtmBDUp80TL/\npJNUgHptAO1Xo8+8MzLltr2Pox8hamMwutm26Wq1s+311w2A+gV7nwVDr17q\nvvcjDlwf4soooXCwefD4ytRmh6iEd4H0jH7IR7z17xwlxz7P+ZQZ3f6rcaCT\njSaAr0YLf9SWgStTfJ9t2NS2/co7ZFDQP74RjKUlDpySbzUv+nMsg8kg+R6J\nVIRE5RZebuNYRD9fDCkAp+fFKJPef9S6ybGwgUCM+L1ctm2YyvkqGvgrywOQ\ndnVsd3Hd3mrxuY83D1n64Pjr0sytKXqEWylzVQOd4c63Tiu6INOcDkmpl4jk\nrrsP308V3tO3mA57vfuqZmJdzdsqeIzUEVIqII+qZOSS0yPiOZwKxKYkFJp/\n+DighZ6EB8frzL9D5ZZXkxfpg+Mh9SipYmjZEIX8yCdg8AxN5aZQtZRPp+jE\nM2QYZUij546AElXJOepH3DbXpRxNhkKP2mMnaHroolUwnNc1IELC7Hbq+6HA\ndYNNSodrsGmFYgLkZegTCsiBwRRil8qTPZl3IJuvivDvZhMMA+IY1pto6mqX\nA7ZE+GXRulXe6qJ1BG0/byhKXonrFAfsyFd6L2oEzELHG8oTAEv59gfV0rdx\nMD1S\r\n=GtO8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC782hk78w14Tlx/FwJQVPoIHpo5XlStML2i6Lm0T95FAiEA/RSXWV/PTRtl1kUkJJRFLpKnz8N6Z97Ue9gWAtUF5xY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.11_1553114155621_0.6690353225407251"},"_hasShrinkwrap":false},"5.1.0-alpha.12":{"name":"@storybook/addon-info","version":"5.1.0-alpha.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.12","@storybook/client-logger":"5.1.0-alpha.12","@storybook/components":"5.1.0-alpha.12","@storybook/theming":"5.1.0-alpha.12","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2c1fae398f887fdad6bd6e8037f1a6bf96074289","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.12","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-9A6NmIviyIq+uIhNZFZk4axN5iFx8e1Lk1scYOCzaDLay2y99QVkyqqjuFQo/49De0UMJPcSNQS1AA/Jt64IWw==","shasum":"b10b36903425e86b6a95ce4bc4b70ad965b02e46","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.12.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclGVDCRA9TVsSAnZWagAA9CAP/14u0XuOy1VM0FxSy50L\nHLIOo3Miyiwh5Iy13kihZ5CsQQI7fal+jqZajIHDR2l9XQ6fHwV8ngM685CG\ny9vNkRTU5I+m81VwfAgCKrhMWrnP74cCl3GJN3ERs+oBtr5EXBP1Zzl4qvxH\nYzyoE/3MCt2JJernm3fA9NngQ0td6boZlzF69dAf8g2FMmfx16WEK8oBGYXZ\nj6+P8VmwhtHqU4GatyiymdarPPMZVKmfBri/B6uwoKrHlOvuhVE8xO818yjc\nhQ+do0bFQn1im4W82C2QlyboUY8xdqd3CD1e6ph4UvB0pxtXfzoDOc9I5oMV\nnHBxKU5nx549s0RexkeNUuB6PO6VB5qLeh1Br0rjlFlsIjJydzPTCmEVWu48\n1rKe8+I7hMtPYiBJWMtF3N/2ca8Whz61umBo8ksn8EZQsNShvnshzyimtJAv\njC6TzjRGQJX0z0mOHOQbje54lkhyQyyCovdYpFH2R6qVQRhrbzYj42NPiw5C\nfMDsfYCcy+YtyhiDJ0psdext7xXSfNSiwHnR/+k2TIC5WXPt2XBBw1KvgMbn\nIZE0xvIIZkGGEyEXSzJqsY4eOAvpdzA0IkgncZU5v/mcBhijKkByCqjlZ1Od\nvN5yOTWx+lbFPyCyeMGYgzqz+HW1VkaM3YdMubdN+9ZV05Ku/4Ug2drQ9NWa\njLFX\r\n=dicr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUWSIxf8mnCA9DnaECAxoEl/MEqxQ6aKLGX+Rpr84XVQIhAIL819JEqCPQriWfE71ruEHLiibhbOBJsgjRJp5/fHtz"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.12_1553229122439_0.5423164346013729"},"_hasShrinkwrap":false},"5.1.0-alpha.13":{"name":"@storybook/addon-info","version":"5.1.0-alpha.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.13","@storybook/client-logger":"5.1.0-alpha.13","@storybook/components":"5.1.0-alpha.13","@storybook/theming":"5.1.0-alpha.13","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"15871945e228a6b15bcd553f8b97d9a3a1997233","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.13","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-3w22ESW/1zVNeIYyoEEvZnVp/iUjZorlgxFNR9SnHkt/p7rFI6Uqs0K5A6e31FbiHv15JTl3amIsU/Fvq6Z+6A==","shasum":"bae2a72e586bf5af6a8a416a4b2d0df269ea95f0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.13.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclcK9CRA9TVsSAnZWagAADTgP+wcXOlt6J68gKXXpzHT+\nH1SgRE8+mpfSVdG+BoHDf8yf/xPKJccyU4XSLkB7qnJlCnmHw8UGGhdt7SdV\nH83NBObBPsVWWBAZk/G1xtCW8YKK4KcFoG0bMOettg01zf+phlJYSlQi1POy\n8A3Nj4+RH6K7dJK3bqB+Nj5qqmBUW10uOvJ0ZbEoCnQUAjbc0DzEGYzW3HGz\nmWOIkA24SnrMxwFJaZ4d36sjeQEprb5Gth6NqZnP6RMOEOe0wQep5ks3dZEe\nq+/kf9X0BLf1hbiqEtomZQCa5bC4gA/7tQU9LGqJoiy0vLhR20xjDbcGMvNv\n8N46tiaqe6/WYjSZSMXTsX4Ddxcok7jEZIxgq2Vv7FEKBGOizR+1bvaRNusM\nRjY/ld5+mn4FVRgSfE80nQs4NYql+6sHcHEERUiFGHprIwwwf3zRJYDbNiZj\nOEnTdO7m7vKDUFF4q2vpm5o1groATHCqiLMuCGUsSCRjfb1M/oCIOFDAgH9e\nBx3LbbUTFkrAVLe9lUlw/Vlc7uNY6y18mhdEm+ncfIi9MsVzbASecaQRz1bP\niFzoBU2ORqSLf9sfawSSP0h5fypGDA6rayAW1vKzgmVI4Tma4MBLroXnK+RI\nK1puoSK39YZP6HT8i81sbgn4v/nfUGiOP3qTFaIXnMgErO9+FvB6W+P02OV6\ndRfm\r\n=+c4g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMWy7jMC9GnvemupB5FgUS+WEvBj12tTj7Mty6Sf5xiAiEAle9f2b67JlCwyntXQbVGbc14XbANrPvU+n1DFeNNd90="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.13_1553318588977_0.8439007768325184"},"_hasShrinkwrap":false},"4.1.16":{"name":"@storybook/addon-info","version":"4.1.16","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.16","@storybook/client-logger":"4.1.16","@storybook/components":"4.1.16","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"58f39274ad8e12a8dc1621d42849d862b7e31586","_id":"@storybook/addon-info@4.1.16","dist":{"shasum":"714c85308e6f67b9cd2e075ea9b6c754db6812e1","integrity":"sha512-n+tQ2CMOWGimqOj1ubo5d+NtFwJ1JpxlMKdKcl6D+w7NdtNPPLfVzDF0rbaR1lXAB0lPYzXtsapybEmLL5iwPA==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.16.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclzJACRA9TVsSAnZWagAA24sP/A348DB9GXSZDGVQDlX3\nCqUe82NZI7p2XTBJXFzNVJaRFQnN0K7CR4gL3MAB+/ulAxMlAKwDrJK+yFNY\nHjJ6MyBzAeG/LS785pN8Ci+S3tohHyLWbdk5SwlV8t8WFW3hKY55PwbLozX7\n/EL8u77OXZTwn9+U7bUuJTp/Uyl9P3uP37E7e/kIKTbjlhg7+8P7XKrAVhtj\n0ielNyhY3y2cbddNwLu6+sl+tMG7KeQhV8qoBUYrqe1gHIDTFStdaRgvU7lt\nqexctMi2yL8BTQvc6LzbM6otMv+uVIbb4UDM5o80VZvSekaI9WABZ1As/m3w\nyvt3ggZDMsX4jxe4GfMLPiLTrZmbJyAD9QbrHYPVkmfgCIQ1Lb2GCP5SkYMQ\niJ3PNPxVx+YJJ/iS1rk2Oz6fS5QE5/Hmg03+4SmSElJZvJiXxR3bcw9ck7S7\ngr4uY8+a4WYN89+OtSwcGmTP2C5i/2MM+abAyKnoxPS89J3nzyvz2X7ditrO\nBWb+1e4EF0PvugBYpBhPkBWS6LpofZqZppHcpTKvmDio9/OgfxD96Qune5cH\ntunRVvaZ70D7/WzhyCFIlNE2JR7huFS5maUuuwMbz/oE3IFM3u/SumebtwUs\n6UHkvhhat88iLXahASGuRd+eAt2or7e+Rllme35zIHZqqe8TaGqRvsDud2V4\n0Ugx\r\n=8HhF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWVc/rluhG+ZEGCPn2p9tXc5Rc7pyo64UQUwwegcAA5AiACNEsAVWgksRM5fLWj9gFrkw/5JNiOwyL+s2K4RQAjrg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.16_1553412671496_0.6348365413222092"},"_hasShrinkwrap":false},"5.0.4":{"name":"@storybook/addon-info","version":"5.0.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.4","@storybook/client-logger":"5.0.4","@storybook/components":"5.0.4","@storybook/theming":"5.0.4","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7e70c5f06fc1f8d4e533c7e66f7222fc6e7285ac","_id":"@storybook/addon-info@5.0.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-UZpgCSqE0ScKaClTm7Pmz9C9Aw9Ks7isRmRRzSj2xhKZLnp/qZP8LzE+3T37L1Ra5TOspnWvuMrfjQMn/iycIg==","shasum":"0b086fec84d40a331acd42a81da42a1aeb796681","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.4.tgz","fileCount":64,"unpackedSize":744116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclztnCRA9TVsSAnZWagAAPEUP/2GmdTf8uxA+HF1JH7Gb\ni0MooABy9A8tb3HUvJ0DXMbD71J/O0ATJt+WLF/vXX3tKPo2uAZYCzRcIB2W\n5NKWP4ZOVIwDzHzitixnx96T31cnNcRzWKlkZZU7/fMvTVx4NGkTdj+M2iLk\n2pLYfrRnhWqA8jpczD6E/unld+UlHLCF+xdH6yzuE/1adECPpGv/cM1cNbHA\nfIMrhh63G/ZgRLIYljKYP90xX2to7Frw/UfdFhcaqeugu0zejk3OP9cHBrGV\npXXSbiAP4PrQM1cl6rTyIaryZHmZNMFj+t4atU7SAXZooAtW/sYvPEbQ3k3g\nTFQlqbpLU5/wbSs0pabmzCf7TT16rfIEyrWzCzO5hAI6mHcaH5jpLOgd97Q8\n1q41MhedwSN6KjGhLMng6piRM7W2be9tn+KCkYJJKEePmVJiFGrqyyLLm872\nMwUEsYATadCbvAGRAkGkl8BXSgbYUzhS4YYJGtqgKnUTO0aYfPfTynMv3agp\nCG3GsK+oaZ3LeeyV38PPioD0OQgEO0rNyQqhOqAMHxvfZBQxCgWwZg0WSwN8\nKlbZkZ0uHRWmOIijzctdLy5GavnI+sj1+Hu17+UQ9mpc0cyqw5Q+1b9OXjV9\nTITczEMYSIdBbtz8wJqL3h0D9RgMNR9CwBUTGYkoizvPzrY5GBZDmH2wREgJ\n4io+\r\n=YQJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4f6Ejx4O1aoO6soAfkF0akyp0iSf/vicPNMa0PNGWPQIgdc8iwY+/sHoskPGYP9ouxlyOHng8a6DkKj4ix1nhiQE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.4_1553415014547_0.742586989638828"},"_hasShrinkwrap":false},"3.4.12":{"name":"@storybook/addon-info","version":"3.4.12","description":"A Storybook addon to show additional information for your stories.","license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"scripts":{"prepare":"node ../../scripts/prepare.js","publish-storybook":"bash .scripts/publish_storybook.sh","storybook":"start-storybook -p 9010"},"dependencies":{"@storybook/client-logger":"3.4.12","@storybook/components":"3.4.12","babel-runtime":"^6.26.0","glamor":"^2.20.40","glamorous":"^4.12.1","global":"^4.3.2","marksy":"^6.0.3","nested-object-assign":"^1.0.1","prop-types":"^15.6.1","react-addons-create-fragment":"^15.5.3","util-deprecate":"^1.0.2"},"devDependencies":{"@storybook/addon-actions":"3.4.12","@storybook/react":"3.4.12","react-test-renderer":"^16.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"homepage":"https://github.com/storybooks/storybook#readme","_id":"@storybook/addon-info@3.4.12","_npmVersion":"5.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-Rr+VLcof5BMw6qYpUkowlSJ7PRfEBIU38aeMIJY1ZJvXoqSNZMGIhvpbmetQ0VvhmrOuMNLckzITc8i5PaLtBQ==","shasum":"3e867ed347997823a5389369aa018231e9416b8e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.4.12.tgz","fileCount":66,"unpackedSize":420669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl31FCRA9TVsSAnZWagAAFvIP/3EWsVFmNQN2AVNztTgd\n9fVrdT+j60Q6V52bc6aZR9Y7sMT4nus4G7ObMYuo5aKpG6FGfMWC+Bvxuux0\nL4j0h6f2c9emBLdxapN0HVgc2UBGbazcRcVhQTaia3wRUPFjvtKZsj1CWqId\n05PAJv4LjhN4AM3og1BQgu1YDpfp8xUIPVk8j899EB9JiRAgJX0oaw+Ykuz0\n8aWdZonnDiTL5tCuKzMRwfM/kKF4TF3vykr/ZmL8Pq77fsvw1wSVUYaKop3J\n6AZkk/QSM0Q6GrrjUH2yjtD3pFWZx9xTYqXJNgwuicezc8xcaWUKLdz44a/K\nVE5UhtTJRH2+5Bl5O1nCKSIurW+Z5PTZ4RdicgAskKaht0l61uB6IUJn60ED\nm7aIj9Z7pnlBCiFSc03phmAOIZav627iVY0ydTdweRs6faVLvI/dUC9os5UX\nVH0HML5N1ryiekFz3wxcdCeoRVbp2kRmESgYBqLegZ9iGUJG0xIAJzxMtwvO\nuiIXnVVMpPEHMBpLScQV+lpCXK1g0bGo9KQW5uzw7jAlKdAS+fyDT6Uq65f6\nXy5p6vVMcbsme5Z9NlZI4dj2JOEZJdxuEH1QO5zFkUX0xFc55oVWvC0nZsi9\nX3elrvLO4e2pyYFjespzcqkL746l0SK6ARUHBU4E7lYJRzZpHEasuGsyRQxX\nyJvP\r\n=3AEM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXK0OFjOl0n3A5x+bGq7H/BUP5xrpToFXqIV3hdLdULgIgYWNVwNzOj/odq6QPhTIs/wrV1HiBgLu4kVttSz5/7to="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_3.4.12_1553431876420_0.6347589535804596"},"_hasShrinkwrap":false},"5.0.5":{"name":"@storybook/addon-info","version":"5.0.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.5","@storybook/client-logger":"5.0.5","@storybook/components":"5.0.5","@storybook/theming":"5.0.5","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3abc5928c99acd2d364e1e2e901d19e89f5ec16b","_id":"@storybook/addon-info@5.0.5","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-myWiFGgHXBeIt5K1Znq7UyjPjhxfjT/33g3Jrwp9EBT6rCY0evYuQiUjAxKzXCDMfU+d5IvqobzvdaiqETpDxQ==","shasum":"6b2e4ed0d92481a0e8c21c64d4124e354fd75cfd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.5.tgz","fileCount":64,"unpackedSize":744116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmA1ICRA9TVsSAnZWagAAk6MP/RqV3Mi9daY1M85RGMSB\nX7F/Izv7Jqc2iziBBXapv1zG5hpUpu5NHMKZaKzcZRwZFbvxJ0je+LmkKBJ4\nR+Ggxpjz4UU4793Hw9/rG5f+x3y+JWOlWaIBfh7R/5wgf/hoJoeKmlKI65sv\nNzIiTX4T4lItqrzXACLbNgVNoL7D13pJO1ZeeJU9+gd5NpVcSG65flb/Wxdi\nQC2N++O5LBdrycgfvnSpxoX34EqTbHx1LiLWFe0DyhVXT9V/jyRCTeM9mG6u\nH+5gIvMhNweaYAtonCV2l2de8uSyEuMsl5VpokaFCQVw3yQXUxNFzkD1Bn0S\n4ftDzmZ2bwIZPabCRNM/iLCpa9gUug7UotV0Yq3kcJUA+r3rQqMyVupR95NL\nIrnr+neVEA098cVrbgADuexCMmp73b3eMhiYwnlsuGyzeSoBLm3+NgaxvSVT\nhxEWklan0GZ6bJwiF45+AQeER2t16HqJRARQcD44D5cwgomcN3ilIRwEjNbu\nSkVZvbTlijAvq6KulnMm3n05WQmlNfS1yRYGteS5jg4N/6ul7aaU5DdUMhBU\nTsA0DHUxN1SbY325BvOntDFMuqoyQyEi6IskUrGsyubW9zZjlemrEqxwNR37\n06neCcKmsYvyUyGmf+wjXD8TZxTapE9ZyLXvzkeGymh/rrAHI1eZ0YX4K/Fc\n+7oK\r\n=kLwW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEw7lXh15Ww+45ADRqQDJMi7fcsG0a0FF5w0wPsWFdyyAiBnJRnbWVZ+kg+iGPjkTmcQ/x29XtWxF04rY3s/9Vfn/A=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.5_1553468743973_0.6081675419518637"},"_hasShrinkwrap":false},"5.1.0-alpha.14":{"name":"@storybook/addon-info","version":"5.1.0-alpha.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.14","@storybook/client-logger":"5.1.0-alpha.14","@storybook/components":"5.1.0-alpha.14","@storybook/theming":"5.1.0-alpha.14","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8f95620be5838c42ec36f6d26b9cf9ab2a2af6df","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.14","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-C/lbOP4/UwNrM18GUHbPpOLYAn6t+VY2VKLP3+//vd4Xqexsl1mbuRx/hV0h/OH9hk4o5+67nLq2LacSaOFkPA==","shasum":"1d096b76109d15c0424888ec91a861248e3aa9d3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.14.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmPTqCRA9TVsSAnZWagAAMPwP/1vhOUnyF+e36jTvGGDY\n0o9pauJ6EZc6GiITHoOHpnKwcPxSFigDUiCO1n37R+ZVPEs0rVdR9In4i47G\n1a+Ta562xs6tf59KNjZfVLJ1q0fOIGxBMXwdVMoq7Sx3y7lF/CGv7eHf/TOI\nUsVxzoLQiy+2dbK7t2YQCywuoLeNjP+WMh7rUdbJYmjbGYzUdgYO6bHtdB21\nDfdokgyyACZ9s6Ar0/YxKEblWwpd+30SgE0MsWNoZ1M+mUYRZT5p/W5sVEn2\n2AvKH9GEcjG2efus/qzHoO7oAZn1yWYOlB1Oaty1F4qBV3ODlBLDlJUhoTXF\n6EOJZSMxqgwGuaihNJTDd21FkZFvKMiP3XkrD+Rp/Eqc+FbQWnOZ80a78IH/\nQ4SoWQLffsQH8/7Ot2F+MmxSu1WgD4jLbns9gHv/5NEJ7LQPCA0V5bqdGK+6\nEkxoaZtHKJpymNPcYB2pkhDqkm3flphk3udc68CmcsV17Yky3x54QJf/5RVi\ntdbm3lwQh/wN/CDRrEg2tIwvnGt/JiGZn4UZ2L79qCh47ekvJC2MXu+I/+r/\nluayLfLO0SMLCnANLJhvCY8tJ2yePrXeACPSJukDRy+o8b/uDNA5cngbdyZt\nD9zoVv+4ligaShgtQJrs3qlKgy0hprJZJdQ1+AH5orakOlAjICEsMvj1MkxL\nPr5j\r\n=X0Mn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzM/ATxtL17fuBLsNlazzdRtk/mCChxaMerT16Y/5VbAIhAKaTQxXAaEaAPHvJP8o0ghSP6narY9sLfzs0zjycgQpK"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.14_1553528042144_0.4369287499411645"},"_hasShrinkwrap":false},"5.1.0-alpha.15":{"name":"@storybook/addon-info","version":"5.1.0-alpha.15","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.15","@storybook/client-logger":"5.1.0-alpha.15","@storybook/components":"5.1.0-alpha.15","@storybook/theming":"5.1.0-alpha.15","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7550a437a261abf4d80152287fbd591715b627e6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.15","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-AGn+QNsVEF/BSmEI7CDX6f/4xNvHeG6dtcCmTyojeXvm/9/mxRZTNGL9gcNc2prGvWo6arvpVqS66B14XRExOQ==","shasum":"71994f2f28730c1e255091b127f23717eecb93eb","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.15.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmZg3CRA9TVsSAnZWagAAUp0P/1B3pEbEohLu866GfcFc\n724WXID/AJBIfvoR0ZA0xFs1xzlvsaXpbf4dTBo4NfWkDekDw9MWNo25yGqT\nlbBQFU9Xta0HvTzsyOHQh+tL8zoDrBC98Hl5jb/Wq+n4eTNF4OyIKd7H+lHs\nQ3qAIgWRUkT0O3PLunyJ7UntflWNOFo2Pq97rjdda6qtesVPTnZv7UNk/poI\nNZWXO7fZaGUDLwG0mXFo3FFC6HfwKEUXuLAnxX5WMP3XL2ABlCywinXKqsrU\n9Ai21SsCcmnwIU4lCLGClmfPCbQiyibAuXmOOWG9lzpkPmUvjg0lyvsyBWGU\nBJxHe0bW0hMdQAP+2xD39uggu2aEnq36m8JkvXBE1S71q00oaF/SbzQuXgH0\n36dGekNIXnks98MiRvwo07sKqCoElUlLNrbAqCkw/Y+3fojxHGHVF+U5rcCO\nW7JSeHvY4vn/FGp9npZF7xFA0MGdZJKKyMi4yR6cyj1oTKJGHCVLvpSp4qg2\n72J5pfruJtuYLKJDrczeG93dlyW3DdPPdJRgZY88tc2G0P1H6yjSQT7G6HQf\nxHSxJMWAnt1Sh8O05F8pGvsTVGRUHeQPDOdyZ1GgOvhpg0wXYFpwHL/7gTWw\nhIBiXSQOP3J32Q1DHxr4q0GiL3ALV7bYr9gDl/CU/1MyEpCtpeMa++9YcVxt\njNTb\r\n=qjMa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC23SH5F23IIlmtHcl1D/d/7Zji0CJG5sYnuRvjnAmSxgIgVLBnUaEEpEwje8WyHYjC1XJQjtKga8xxwnMrD5TpUX4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.15_1553569846859_0.2917843073263451"},"_hasShrinkwrap":false},"5.1.0-alpha.16":{"name":"@storybook/addon-info","version":"5.1.0-alpha.16","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.16","@storybook/client-logger":"5.1.0-alpha.16","@storybook/components":"5.1.0-alpha.16","@storybook/theming":"5.1.0-alpha.16","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"988679f4b28cc9b4b0c12bd7cc975dfa84a62743","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.16","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-HUgRQtaLHZFWyPEVTJ+XoulAWBL11GoGSZ5SMAlCQHYWt7rffHrRodh8qhf5ZGTPpQSsCfDBvYJFB6LsmUR4ew==","shasum":"0e457f328873af4e97c2778b50ecc14032d79338","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.16.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmgKACRA9TVsSAnZWagAATaYP/jzqJWtBMxyqwtd7thSa\nAD1A4JJ9Wzr+xm7+3HV298PAyZcUr9/OOmDsiIR+SSiHGamxSq1iSVWdv4Rt\nj/pClC9S3BSGcNB8ctJ6Xgugb6DOqLN5sGXOCySH1vfNC4kixNQ87jhCQoiq\njLHht3JjX2caVuxa7690ft7rG2+Ng/dz2gE3uBpVlIJu3pmC9GUuHioi7xAH\no+FHNHlCsaboeodtfJRX8CbryJNbiEVLu0aGmtwsG2E1tsfMUAZkqC6QGO1S\ntJlb6Xlk2SJDerBAwK59yRfUGrZluG33e2cWJKvVEf/5D3WlHDxz+ZNeJpvM\nlJ6srjzaZCV0mXTkZo85evr2co/OC/680TMALoCKZpcIOI9zfyoMiU3pqr2K\n7PvVFFY5GDR6ykhlvvdvMVgNftP1yW2nxD5Q1iZtrkvbwf1WjZ11wlvKsNbf\nj3cwAh7RjLfHXlgn5wfZxBBiTl6SV/E4u2ZwZA6k5bwpdYe1h7Y1+2P6dGH4\nf/4AzfOe6zlKdmTI0PebYmJr0sB55b2831h9gi1HWnSdpeeyK7X2pxtV70M0\n2RN0K3DNO3a9xiflU+lDXdSojikDrlth/oLLHXQ2ers16bY1aO6MZYOGTxRF\nIGQVD2zsUWgYb6Q1Ca7NtP+2XVnQw8czYQDwEiYUp3Qg72Gwd1yRmn2CLpVU\nERCu\r\n=Wpl6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7GZvxiEMb4DWSV0acRl2SRGQ9qKv36FH54jji7uWingIgJBwIDNZZt7xmrtKChx8x56lBuCpNL0QSEiKBYhCW6qM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.16_1553597055778_0.8218950533440574"},"_hasShrinkwrap":false},"5.1.0-alpha.17":{"name":"@storybook/addon-info","version":"5.1.0-alpha.17","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.17","@storybook/client-logger":"5.1.0-alpha.17","@storybook/components":"5.1.0-alpha.17","@storybook/theming":"5.1.0-alpha.17","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"99379542434cc556b2c063056c3fb6e3ab0bdeb2","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.17","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-/GMsskdGW2baXm6g+6HDj7/aVY9AterJIQB2brTXsVxaExEN4RP+RfjEfUPiztOC8SD7k2H+tS+07M/hBrrfmw==","shasum":"7c3f3b6d8deb62ef18a45f909f42f8b0e853d746","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.17.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmiN3CRA9TVsSAnZWagAAUxMP+gJtPhvs6P9X5jBHAOim\nBi0SextJOugZSyLaJZcoELPoSpaT2rAXbI0r1D4PeseQvdh2IazmVkuumIck\nOVUVkVKJjlUuNf/e1qowSr1ZsJkxWERbPQqO1wH/7dJomsv/qpLOz4Rq0oto\npESXekr1e9pebf5MSZDZVJLsptvKVs5vLvWxZoEJbwc3cThdQBVtyf81qJXm\n+R1NbJDbO7yDQVghjTdI4gFcL9/o22LxcCflo0CBoP4U42g3KUUGepVeYV8A\nWhI2oCHqZSxFZp5VvDd2zpwdcygtikZZ65EaCi6D6fxnxL23s22wFA35Je3U\nV1iQAkwYoFSRqKqKJYD7rmuduKqKfGxRrXmxtCwwWl8JQlpyhCsGnjicUCx7\nrCFUkZYtEKMJFjcipfvVq3v5zUW65QPSwKw7STMr1puehmd62+uCBH0d5N1K\nBdkAfZYCwyGSRYjARkmh7b8AnJ0HzSbd4Eni5oE23rls2/Ru5D1gS0tlxr8w\nxrtBdf1NlAtiDpHhrEnToKDLIU/2xzsLpy+Fyz5CmOt6chFQfKA0+Ewcd8lU\nogVjxLLP2yydOV7Cz2W4S5lWuj8/VN+k+lYSN9liACv6iwgZVanRI6hWQUIt\nkmNfeyVpl5SAs/jwm6eW7HPn4m0g+orak7pCkOJJjcl2bvEPz6tgKlvdoPwn\nwImz\r\n=XNoF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcl9q9elRJGrH+j/uGqQeuDAmjB8BOGoZoy0ptk5hXnQIhAKqk8S3JYtySOH9fXwUKgxVFViy5oIlMow8KkHS83WKD"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.17_1553605494597_0.18147618959975165"},"_hasShrinkwrap":false},"5.1.0-alpha.18":{"name":"@storybook/addon-info","version":"5.1.0-alpha.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.18","@storybook/client-logger":"5.1.0-alpha.18","@storybook/components":"5.1.0-alpha.18","@storybook/theming":"5.1.0-alpha.18","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8941e4449a8a4525472e45255fedc4ae068852a2","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.18","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-4Sm64H8sF74kPGDymhj/cHDv9PK2lTpktquhHgRB2VuBep8HSFMwalDa9CwGyaCx3CeoaCoYHxQ+Fq4whwfKLg==","shasum":"071923ee681367b3dd1c9f9fe5f321055f5bef31","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.18.tgz","fileCount":108,"unpackedSize":786146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmrfKCRA9TVsSAnZWagAATP8P/iFXqt+xGBT82H9pAN4U\nYmuZGE2pP1pbtUiDGqf+es4wAxJ+asRxUv4yg5r8niowugeVwEDAwdwc/few\nFpqPbn4Cl0tV/0CIbIlQ+9vCfI34T6I0wTbaSpEPW6g8uRTEu1xFRNDtF/wb\nmxpPRxeoMFUQzNJPW3+KkRaMYVqJ4bDgiKOSt5i4sBCzxb0k5yVqFWP9BmAx\nsKVC1iToJT9az025H69P6yDhulWrSw2vzxsmjinVCVF4vdPRILvBdFa6oZlV\naz7pNwNVIeCDFyDKBH95TWTRJk84TdcDHZYM3VBWcrrs378WE6VJzhUCTLZE\nkBYoSejbAQy42T9K5hGjG/zgtZh9MygzbDMU/yzWFPhLJ+KFmj170rCCVne7\naaBfmLdkiHd7ZpnC1hh3dAH5cuT2nqValzFLt/JGXvXEMGYRpK6teHMgHYdL\nDNRMfl0t0Z2F+Bg5XngkA4EtlsIkx6Y3AglqVifFEL85COpa/S+wZD8J1Eb8\nfRBa1N8HD/9UbqU9srHUQJna/qpv8iLn1lV6k/ZDioT/Q1ckg+e9fO1B21KN\n8owpj53vOwy+5oNxfGhT0i7QBfGxYrNTHdsRF/dp3aQr7g9jZ+oVBzhXYIjw\n/StrKbf42iWFcUEUvoxmwZciH1VUZnXl4qcwxQwnycIeVEad7yuBscyIgmxP\np2Q5\r\n=ukxg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnktlQX/CcAdiIdL0lj6HeW7qGFkF1QM5ULxahM1NC/AiBKGv6zNFSyEDtlaF4FHA2mG7CFFYq8E6bfkUX9XviVQQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.18_1553643465407_0.2522933233851121"},"_hasShrinkwrap":false},"5.1.0-alpha.19":{"name":"@storybook/addon-info","version":"5.1.0-alpha.19","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.19","@storybook/client-logger":"5.1.0-alpha.19","@storybook/components":"5.1.0-alpha.19","@storybook/theming":"5.1.0-alpha.19","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c628022f9cfcce5b6bf048038ee9338754282f12","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.19","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-AXpOOfhYORUUf+d7hQT9cZzLDlBDzq5tBfTu+zWVANsi5lMQ5qUZLysKr0v/MV9t38sYYuVFVTxNTBzYafIV7g==","shasum":"7098fe277712fef7747d84b6bf0517e323c43238","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.19.tgz","fileCount":108,"unpackedSize":786198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnD4/CRA9TVsSAnZWagAA4vYP/RaEG0PFkjlC18Arph+j\n9gIuuJPsMLg7qdstH9v5MNiDmvtB/loqUmRyzg7mEFSa4hsXoPu54siu3e/H\n9ii3torCfaxUkLa54P4GiNiBL0KnWMWoUZpgl5JkWfVJBUTs7dWgKAAX5RTW\nol8rx7z3GTaNCpGkN4GbkE17Au7tZbDTsXl8AlhGrjYrCYpA9E1JyhoV5p0L\nPQwIgOhWPN/pH5cMnzs1g5uuLTcL3tJ0NawomT59/FmEGaiKM6ERO6AdRbG1\n/oGNN7IKjE+x5asMhatMnrr+JpZ13i5iXa9gn37s3a6Rh7Z0Nhyl76o/6Z47\nMX2aLiVbSvx2aLd0NBYCuhdFGJB1qbgny7RjwTU92Jy0cAigAD4Ilk8h15PI\n64ZyVrHPH2Uq73nyZ6w6H6WcpB+j23eAVqUlAaJmb6gAIyuLrTRWW+Se28XY\n4Xav4ppxuUuBnS8xMt1ZtadSihb2SKRgzf4EPHOfFn4pi/06z3M3X7QdVSUJ\nP71tc8F+1Qj7DRMgeyr7OoTVeEG9dsP6IyLsPNRGrEtNMxjHQQGyShi23rs4\nTzfUeUvaK1IxzZkCEvE5UCudFPUqsqP9IVZz1CyRaroIzrUPIvnMR+dNaeTN\ngcj54J5Z2pnatLxm8iWcI58KP7AwwBPnURsBxwFCLyLfYZMNseb4+OTwyUpd\n+18T\r\n=/js8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNvPa9Jgpeq7fB6FsZ9c+AOcnG15CGvfb3JNNlb6sl5AIgE8SveYwjLDeybx6qWKwjN4Jo3ifiLpVG34OBl7krxk8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.19_1553743423197_0.4309034785046333"},"_hasShrinkwrap":false},"5.1.0-alpha.20":{"name":"@storybook/addon-info","version":"5.1.0-alpha.20","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.20","@storybook/client-logger":"5.1.0-alpha.20","@storybook/components":"5.1.0-alpha.20","@storybook/theming":"5.1.0-alpha.20","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a57917a19ceaafd5f5c42bd47821568f9dc26390","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.20","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-4j/6+z02mB/A5gcbunHmD6cFmHu4QCZyGydl7P7z6sUOSjeYj87GxW2UGEeLBPBKv/pf4UFBYeQU4nSZje42QQ==","shasum":"39cf4833cd0af3fa2f26559187643ab903588b0f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.20.tgz","fileCount":108,"unpackedSize":786228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnX2SCRA9TVsSAnZWagAAn5UP/0QF9YodJb95kVSottOj\nxC1CTDf/E8FlAjQ90CrF9ao3+0deOGF6BCyrPzoZ654AuQZxq6OiEcGXW2rQ\nuhux5tlNWthUKTc9KS7RsBpgJGdu5Yu8H2MtKSNxxPjAhd62mnBwH9/WzDs3\nzr6GS42XYdGFePWszVzBnpW9yrvu6EPguUavr+xEYTR4UTK6tTPnASA7WIga\nTU4SSWC1Rs9ssMgjnQiLuCyBBbDT6loZ2mjBBY3Q36HX9EyDGf/ytwqBjE4J\n4csCh9sksHGsvnFi9iONeYcPe2YRjT2nrxiZQZmvUQmf9Bo1SQ3m95sYm9BX\no383qp9HwQPEyCI3Q3I8389SwTigQkonIs1vHUjXZJRBXRsyZgoLJWQHK/CK\n59Rwlu2hSutXtQlfT551wM44y9rbHm9UuKnGuQAmEWSCOQJaDjnHds3QY1o5\nHf3fAVr6CsfK9EUTi5XkbGveOn6yGAlUN/IE/G/EKYETakwonhStfbtzAwt+\nLVX/MlnE2lo2+/xvtCbiNS6iqnzw4r1FR255DqCiLcdXdqQA7v4xUlRjt/2y\nTxPwaRYydhevI50m4WFLMAsoMOAZK0ypT/nMTE2bq7jpIEdcvr/QKu3VWZ//\nHpPDzQ1JmVVrI+y7YEvY7m32KiRiNrsiITiWPhFrgSJeKaxv1DVuFKlAuVzj\nRoBF\r\n=Nf3J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ+CuXg/TwpmcjiKIZuHHZpgfhO6Wwe4RSNUz647ViDAIgPuJPvdUqoCCHEzPn4EjE55AnDr7RJQfLMzCwL6Gq/Ew="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.20_1553825169639_0.41937959354967513"},"_hasShrinkwrap":false},"5.0.6":{"name":"@storybook/addon-info","version":"5.0.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.6","@storybook/client-logger":"5.0.6","@storybook/components":"5.0.6","@storybook/theming":"5.0.6","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6633eff16e5980aa74f862847a48fc6305c876ab","_id":"@storybook/addon-info@5.0.6","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-+jkyx4MlF/wrJ+v7ybQOpGYDL2jvu/dWiVO7mitQ6oyjQiRsmBXejuHv+NXpeVAGkzfXZBsnx0eCzCJLvpF69g==","shasum":"3919d873ece5a126a7b98dad5b4cf6246c0c50a9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.6.tgz","fileCount":64,"unpackedSize":744598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoZdbCRA9TVsSAnZWagAACqEP/jSLIts7HjV+f4Po/dOj\n2FoW2YiHEsadhkTIwM8n5Zi5oTntzBjktOKsgMJdYmC5+JKLobC/01wKJosE\nJpxoi8lbBLcPU2TC3/pXu9np8Yr2YSYzNLgZh8rWrpBCvsBiSaL6c7utTnFu\nzXP40oISWZ2m0Vp+quAIKA7SrodWF/HOClOJP9JQLSHPCUhgLDaVg8M2vxxV\nfVabuSq+oLhKdOHCTFXsUbfHob4w6Lkp8BzW0Qu+17DBbJlcAmeOYqWLUob0\n2iZ6fNTnWn5P4I1IFhpwmFE4o2k6ONm4liGKsduM8Y7vnn0ABcmjVhUz+JY8\nRk/g4zKnCnbaocEvz/7HdX/ij+/CkRwglrG2wFnGv6GICYNpr1oakU5bC8j+\nOTiKJ16vh+NuPtmbzRUHZ2aYfoWb5CQYBXRmV5w4VDOJLv5UeS7ggT8BPPur\nEQLH94bylHdP2SmIdB9A/MJouBdyN24yOI+WfSAG5w4ldwEC+opJPlrj2Xpg\n8cs6cPnIeeliRfIY6r1UbviF/qMskMV0HmS054SGq6/Yw+SdZO2bWtm1DKKj\nWAkAYL5nmEbKgrAZmQYf0p6S48n+sc0GAPSWXcS0NVzrTwmGB4jROWptQmq3\nEIYt1MDCYd9ojawjWtPQrh4lcw1azAbJMiAZr+J8837pycaiRvHCA1VGI+uB\nH4k7\r\n=0kem\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpSw4dm4Gmwk0LOYalzXR4gWsm3uGxXzTOvwe1tLlCKAiBgrp7b3aCln129J/6conIX1mfef3imSUR8pEfl829+0w=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.6_1554093915373_0.7098783789528091"},"_hasShrinkwrap":false},"5.1.0-alpha.21":{"name":"@storybook/addon-info","version":"5.1.0-alpha.21","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.21","@storybook/client-logger":"5.1.0-alpha.21","@storybook/components":"5.1.0-alpha.21","@storybook/theming":"5.1.0-alpha.21","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"99c262545d1c106802ada148883ed371901f971c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.21","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-O1095tOcMxQf2d2nmtHe20VcnJ5S6OMT00j3MFq5eqMav2ax3gH0Rk7N9y1se9+Gi0KeZQ5QKr7jECDU7bH6KQ==","shasum":"54aece65ac1e12b05fe9483f6e6e9c98c1f37111","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.21.tgz","fileCount":108,"unpackedSize":786228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpiSPCRA9TVsSAnZWagAAqYoP/jisOUWnnqbWSd5Vl/U3\nofdwm/WrbRqPt4lQZNcN9sH3pNOEbLKFBAg34Wrlp/5/Ffrkmc7YrJR/bRC5\nkAXAaioN5hdeD7XmS+bdIBBNqal+9Me6XtI5nANRpSHV/XxOtr0L+DbApdO6\nQihT72T9cSlS6m8ypX2Xz6lPJLeRqEwFj+LWdU1cX6RdUKzrHRCMOksfbPyg\nUNhXpV3R+cq2++CZxRZmYJm/EhSHKGcRW1WWG21rvtBZfHKTOGydpFRmhMsp\nCaG4jKeUVL+JxnuRGMcsJZfY5RferTehWFKn7FH+qtTG1YAZbFxIKapsr7tB\nRKkD21ZZbor9ptJDfCgeL8vHPH/IDI0WLWfNKN95YShvCHVsDPRjZoGmfofF\n8Om8PO7L/XAVCNp1idlA9c1PgMO11gwuDZpkRvm1wSUoJim3zHsSBCE5z3+5\nkaIlZMNXKg8e1U4xpedUXYYwJdrv3JXwtLNuk13KwY9S1erycUZJusxydYtm\nloF894Eo6IKGXDYBGeL+M1HkFuDSaTbIssKGycO3xVPmcY3itRrgQitNshXN\nmIB02w3W5e7Qmu/VSCBaMra9UCHw3xCNpnKCRBzvfl490rmXAMA+vBPecK1I\nCcHPJ3qQ3CgJvWT0splNuzwjFZrOKBde61v0w53Eq+sr+ap/GhpuDAZ2+Cm0\nrY0z\r\n=N8dm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcEcQUOXuzuEE5TS41dECtKwd3GMnRmkI3pL/uAt/3BgIgB8fE4P6Hzn39434YLf0Xol55IWDpTUmZsbkqbtXfdLU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.21_1554392207319_0.1458227933561964"},"_hasShrinkwrap":false},"5.1.0-alpha.22":{"name":"@storybook/addon-info","version":"5.1.0-alpha.22","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.22","@storybook/client-logger":"5.1.0-alpha.22","@storybook/components":"5.1.0-alpha.22","@storybook/theming":"5.1.0-alpha.22","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"daa8d43e0e3975d36bcdbb6b488d6def33f5b70a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.22","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-wvs97QddD+C4q6idejoSaH5Tlw5k/1JgJjgN76MAdZy2uz9BJep0nv/PZV4/s0xzzfKb632AhWHDzyXjWnDcZQ==","shasum":"e24bac3f1caa3d18e540cc921659a9b6c2ba315f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.22.tgz","fileCount":108,"unpackedSize":787920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcp1vzCRA9TVsSAnZWagAAiv4P/RLlv8FxxZpXntaKgTBN\nHJRV8qTjR3zwpA6utZi5Y2fGppbYHJxJr9WHcw39p0Dyc8PKoI2/CHMpjivk\ncCbziBmcSNwHc09VufOD95OvZYIAabxYZChl/s55ojpFC+oxTMjJkGTbhWIB\ntw600nD1Y5DTa97HrESeAcDjnrxrhXvlVFQGregIGgfp7856A9yVxrVdVPNT\nOtHIdxBFAV+z33Mt5biS1RdSChM0dt83FuBEUVKNxxiSSgNQhzWeyhw2AbIc\nJX+NPMNPBOU5nubpX4QmEOkRxy8JZV/uNCdVuPQ2um02aS+mEEK8KtOLfS6A\noEiH22sUQBbChD/Qwiy0QkOCbgrnTOyyPlyq+WgqHawjfC1cjnoxKJtp1jN2\nxLLxrbb8jAmmj/6Glt5Lw6aLfPHPVuLK9ztljrUCmmRtFMancmkib4avhBxT\n+HmECjdV5FjK4Xk1cSbc6l7SvJ4LfSGkZq5EMP+RHYI9MzZ2SLQOHoA00dcV\nAZkJ63DGRbuL07yqrtDJ0EmCg3xLpaUOWR4t/7MlUG7myI25PG21bagsA9e3\nyFxqs9r1e80EVS1MNaesDToqq9FC4OuUFhwcmgaWzKGu1rEDpdZh7MqpiaVS\n9fV3L6JS2TfDmLklWQ7zOCcSJQ5vHLXp70D6UhDsy6KrhYmOZrqBJsguCLaD\n/GBN\r\n=4wwH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTGX8rLS5aymYJolYqg6rOJGb4pHzKD/tnVor9N+T9gwIgaJsJN0QybJCpXjr6uZjtSmPzCVmiTxfeJZvLmT9zmUA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.22_1554471923043_0.8814050454133446"},"_hasShrinkwrap":false},"5.1.0-alpha.23":{"name":"@storybook/addon-info","version":"5.1.0-alpha.23","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.23","@storybook/client-logger":"5.1.0-alpha.23","@storybook/components":"5.1.0-alpha.23","@storybook/theming":"5.1.0-alpha.23","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3cb0dd5af98b1941324acbf47db43a6498f6ed59","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.23","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-5d9nM2P/oWpnGYZY3iS+zl9134wtJQ6CRSyLCsHSyOj4PfW/JJu/zt+19yxGo/2XUCFDyxB2saEobCwWPGXhOw==","shasum":"6f170adfaa79c7a17927178ba2e26e95617b5c8f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.23.tgz","fileCount":108,"unpackedSize":787920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqyHFCRA9TVsSAnZWagAAnPgP+wXNZW76n99/0isAgNoA\nQ0pVEs5zYARoOxxE9szGGKPbWc9wZ5WbI58X1RtApnWswaVWp5smFR3CJW8M\nG4tx/kn5B6902z646KTnj1U0arKzMOdGREoNUc+ArGphE6u7kFeXOLDSIfFn\ny5u148mNKpjaMfXunpUbFmvApa3z6HUxw/PU909kVtmDWzuhT04K7tue3Q5B\nST+2JBufbuP8wB+S/hqA+/39xHS3SADFIQA4nYcV8VGxt26ORXlQU5H/IJxs\nwLSuXcd4IPHOP4BGUnDuMBNzc6Ke3InnVnJPiem5whypbqm0AU66en1cS9Rp\nHTWlppFTnIuBZUpIU7eps5K4UHrOz1y7bezAxbiNuGu+WWCYPo3wP1EbCd+k\nWOm0rW+ftnTN0LTNVJ3pRFZMPx91RyUsr7uce+AM0gMejQI09FpCTvr2sVsc\n3XLzEjci1vfpRpnFxbWZE79IF+mD8T9khlw0HwYzuOIat+jeAcn8oVmUGoUc\n9ZmAleQWrpiYuU02b1WWyW9GzZinPY/Qh9YDYFYkWs5B40F0zzJbE9w1AU1K\nzHsseavwiYlUtrfa89KqgD5CnD35C2I1wIrC++yc7aeHs31cHrjDBw94dwAa\nbXMzWuZP2Q3Ut0laSHEaZOYC7Qqj5jqwznWGBVJ1YtQ/5QnIKhiW9TVTHjkE\nsvIr\r\n=BSL+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1JEDhYXBxS30vGpRej6+2PqSQtGvnfTaQ1qLaR1o1+QIgMevC3MuW6g66u3xuqwgoizfmcEDE3tHWw/CQMmHQZ8U="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.23_1554719172363_0.32557095119020873"},"_hasShrinkwrap":false},"5.1.0-alpha.24":{"name":"@storybook/addon-info","version":"5.1.0-alpha.24","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.24","@storybook/client-logger":"5.1.0-alpha.24","@storybook/components":"5.1.0-alpha.24","@storybook/theming":"5.1.0-alpha.24","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ea8b7217c3114f979ed18c7da625f72a15e6b2f0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.24","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-lSjZzKc5jtsH6JL7hk2UrpkuJVKKx2eWCFMXBcoPlXt4Fxvw7KMfVQyPndiK4zCFV6oOCp7a2h4ZaStWLGPJ0A==","shasum":"a21d33ffe053ed50cb30637c15258ba3704d1b6b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.24.tgz","fileCount":108,"unpackedSize":787920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrABTCRA9TVsSAnZWagAAh4UP/0KplMHFfIkLl07pR1SZ\ny8Lc5W+huQ6mDYep1F69nHhe/nutfrcYhNzhZ68yhtv8ibCsAT1oj3XRKQhc\nIk5FK6WmLbTH9q23Djk0mzPqP6V+//s8TXtJR4PIvveZxOT/gPehNALrNHGY\nj8NEcbigGocbBzaauwSbNqowg9RFvjjUgZeazogU922oO30VUIqUKunXm+r9\n90tTIRJwagiF+JzfWDzxl9VwXk1bQwj0Y+kf+RJ3Qa+cRh/HdaEU8wtFjhlj\nIOyuInU1JqBh508/S3OjG6fAop93PFIr6ntvac3C+5MVGlsdwKqSeH0NnoGS\nVKx3BcqJ06e9SW3yGiQAnn/VG8wu8ShTd9hcBfgDHYCj2BwYmwVdz0yErYbJ\nmlQkx+Y40dwfYNavBGDLnwrML8yywS7aD8S8I7lA82W+ymeWErzdnQ7NdjHR\nqH95PrwWg00vI6najn8edJ6i+PrPXyK9xKftoPZnrjLzAdxsg1pGomdCyyE+\npbPwzNxgJP7ACDyl+rKNCTCcLJ02QIrXGCjUflJa109kMUnzLk2r3SQs+TAk\nTFOwDug2YibEYqe3iykQrs87xmSEjE1TXyDogbVn91KYuPoXd5gbqjlLMDDy\nCajf6mx8arBWrEIONfmOZ1YI6q5z1fDnFbqx2wZM+t8/OqxDnSHJyWvdjLM9\nvIpM\r\n=VE4y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDohxKzUnUllluf49qUbJwjHujfSJyqloHGasAMP/LuiAiEA3HrvYhFHlQuwlJwWjwmW58Q7SzOK24KPBL1E4NP9dkw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.24_1554776146894_0.39998945682462694"},"_hasShrinkwrap":false},"5.1.0-alpha.25":{"name":"@storybook/addon-info","version":"5.1.0-alpha.25","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.25","@storybook/client-logger":"5.1.0-alpha.25","@storybook/components":"5.1.0-alpha.25","@storybook/theming":"5.1.0-alpha.25","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"eb7a36ff07abac8899979e7953b34658762cac78","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.25","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-t3th7b6S0sqPwJCdiKDIWThSyHgkN6OmVqy0Wb8M0WxVwEkAUeibmrhV73WkDE3bAuh1QXEE97EbALc3X3lPbA==","shasum":"e66b70eda7234f5a2ae84fbe87b23e10c20ee887","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.25.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr8ZtCRA9TVsSAnZWagAAKLEP/2LORSSLDTfaAXF9usiv\ngMMipS42LwwU+8mQNbfo1AF2BGRNapG67YIiytnWlXc1n9C3QJwuDYOAEKDw\nFEd//Tg2I8+UnR3gVlZC5zN6q8s1+mikbU+urDm2d6Fvocy945eVzOHeOlWm\njJR/HhJyFgMrRGl5MVzbNcQq6FfprPPuIFjfGud4xhyQ9Gr1+j5xyvtfGLSF\nqShH+oC6yXpUS0BzYjF6ihESThw0aVuE8EO16uKiLqckv3Zkl8pwQkXOC+vq\nKbSNC2191I8jMFxKBiz4e9QYVYueEzoScTRbSwKfYi5f1IGRCjoZJXNuH4y9\nxlywzPYmJ/kmY2F0LRVN7jYoIgrx0dqiLMOaYo6nXwuwlLJtfEyS4zxvbPGj\ngMx5HicCLvwIvQqheWgetPnkK0v6WxusFP+XzcsM/BCUSLD1iYwIU9Cv9G2E\nCVLWxgrWpb/ag38hGVuS+A/OylRPo8BnHFffOGWYluAmGEpNkStvNXwy1nt2\nfuFzo/CopkNW8gspVIwOrvNxO9usaFLG99oDEZyPV1GhsYbzWxPXwIYC9Z0D\nqjFDl7eLNjl31CrpCO35QXubxkFZ2XzXTYMY8rCPzwVw4iuUnTnopX1lapEn\nOR3rcXbt7zmtkE376KoFfWO9/bcER0CJHpNByeYdS7ou4+ZLPhI182WDq6wa\nW8gD\r\n=IA7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKV1oIcGdnW/EU9rES4PoThrLT9jcBoM5XoCKEX554gAiAGfF09LFI2djkSG3+Px7X5h70w/5xXV/kfdRtGK95fLw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.25_1555023468459_0.13181597034709713"},"_hasShrinkwrap":false},"5.1.0-alpha.26":{"name":"@storybook/addon-info","version":"5.1.0-alpha.26","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.26","@storybook/client-logger":"5.1.0-alpha.26","@storybook/components":"5.1.0-alpha.26","@storybook/theming":"5.1.0-alpha.26","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"17b8fe98b908b8b6923e6d97c0689b25bd1bca86","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.26","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-00rB49/WK8UiJ4gYyoxhRcoHvAquZoC5LIhwLXQaVed2aL81tUO2lvfYXMzEOk8IM3+0PFURGNiM5VYon3xSzA==","shasum":"92e20a9ac3cad3653b51801ff5d4b9c46a9c5909","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.26.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsTXxCRA9TVsSAnZWagAA9OkP+QDiEPG5nxbtduK/k0LE\nK3fk0rWRqtboCD2n0POklMQOROKndRGMviq6IGu1CmxN2oa4WKDLFo1pAgGS\nT275wqA+b2vWKzqWRd2DlZL4+2rS2KTc+qwmTCHzxg+8mkDogkOBqeyBetNF\nsHuFlfVwyzoLncHvIMTipaL2KI8wOsH5qSRfCQ2HQvlCsaUV3z425yoCiMmv\ntl8Wi6h86zqMCOrvEGnX8Ki6ggn/4Vh4vAS94VqeYEJ+8ePJzxbas8ROXPfX\n7h/IuA0riiNYMcVmYNwx125dgxUigaJU0eoX7l0uEjYWq0hTeU2TKYobEa99\nd0fuLXI1ZlDQC3GRjbXXLK1gBL/jljkZQneBBZw5W/FiOe2vKIeEdErhDWQO\np5eeucy9/VlSZoPWHteCBzcS/HTg8gjulDVMD19/rygpzq/1Q/n+t6qXxtDX\neWTKwhnFuGpAAqSjVfVz2F8NvOipm4rwjQaTxyS0q3HPu2ocbCQBsrSV7tBn\ngby+QnaFZgZl6WZWUBluxN+hOQ6eA3gHJqt2AiQMeOvgF6x2HoIKi12xogoG\nzH3wV6KQy/gFPq+kdzc+d3BtDykY1IhiHC0d9rqyTgA0BeLjW4j9eGyAY7pu\nI4ac1xwfypsXfGm70NwZWbiapaCgwa6kKg8ctGLemZpxySQOfEz305rks6ZH\nKZPc\r\n=PKOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBV07MrDlWo9s8H/0go2Q5ZI0Dz7MrBLpb4NJZw2MIlwIgIZZw3qsb4cOlfMV+9uvJ1Kx+JvmM/lDNRSjg7ynmGV4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.26_1555117551640_0.3746490181989117"},"_hasShrinkwrap":false},"5.1.0-alpha.27":{"name":"@storybook/addon-info","version":"5.1.0-alpha.27","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.27","@storybook/client-logger":"5.1.0-alpha.27","@storybook/components":"5.1.0-alpha.27","@storybook/theming":"5.1.0-alpha.27","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f506e15f54e79480816ec633651eed0022641533","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.27","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-eFY+7lF8JZ8dnxlFm9hNzoEY63EnRsZIgpLjpJk17LskqHhpHmG8anGij+MC5GQpT6xLK+lvlSuSzfNw98URgg==","shasum":"654fe0740f684a8c5738be1d03999bc1bc93257d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.27.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsovQCRA9TVsSAnZWagAAUBgP/0H4b6Qmw097wKuRCys9\ng8MsjrNL+HDqti5HG0zySJ4zGf9tO7tBxCWwCMY65t3B25Bs3xK5+lFAqPlL\nov9kDY/Bi6dPRBfIOBITtzAb5yvhHFYQAMuHnpKcq5Cu0BBMDnX4wFXvPS5D\nhe8TWIdbyLkA+NLgyty4f5BZGrAo2Ztf3ZXxv6QXHiBQG0mWRxLaXPvJyOZb\nARL9Y2GYJFrd/rNRRjCsdIaab6/8Y81b04VNL43Hef/DqENxlZCg/rEUOaWc\nDDbc7UfXbedhXB9e3YXMapAFbCEOQfUS46eNZEgGwgz/1D8KSYMMmuvlANDw\nrjeDAI4zzfysc4qswpjDddPYY6hA21VitJLCmStEQ/GlQzB2td1XZmDuVvji\nA79gEc1XUK7MTQIV6f6gTiS1/MCtzR7ijplariE6FVpoPkN6IOqf53exJIkW\ntdrZ3Ag9yUg5zsnV6GKBJ+KuloA+EwUf/lOayQVQMAwEQr5C3LuOejs79e/W\nLLEexbey+8Dr6uneAPOpqNzAyL23w34C4KbK156qtE02x1VcdUQnCSY42L+b\n2Tk6/OpgYu7x3TgI4qZdGZ8rj/EHNpqF7DZ0ewyVYoF2nhoBrp2hmXasutnJ\nKucV/2aX316UW5rkwNfjIuxUFY73wZA4fCf8FldVSMGyC6C392qlOnUHf4r+\n+VZ9\r\n=X1nZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkT6ngFHj2B7HffZaIicg6RBpdEOJ+ZtqGr/3f31DjqQIhAJFc1OJaSlWbcSSS+BisI8VyPqVIhU0sfRY3EgK/6wDI"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.27_1555205072105_0.26552608529701116"},"_hasShrinkwrap":false},"5.0.7":{"name":"@storybook/addon-info","version":"5.0.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.7","@storybook/client-logger":"5.0.7","@storybook/components":"5.0.7","@storybook/theming":"5.0.7","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"effb88f7bc652d85535be04c2e6deee8d88e33bb","_id":"@storybook/addon-info@5.0.7","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-BZo5J7Kk+5a+uRBaVf9UGXzT9H+5L0IQgY5P5/PxhTzhWBYweFEr0KEMHMdA/t1IQWuKlB9nN4iRSkFQNOSCzg==","shasum":"4406298e5f5a517a774d17d9bfac639a33b3b205","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.7.tgz","fileCount":64,"unpackedSize":744598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcspXpCRA9TVsSAnZWagAAdCkP/2OCAyfcZqcK3DfhF76y\nCokxsu9hHyr7mOtNUNyzttOCO3wvOiPN5Y6qKULaPWVnrUEnVgKWdpgOdp0x\nlG+OtKjz8dsBHYIVRfAXAvhBU48XaZ0sRkF+eAWiDvSCpcbIONQbhNvyvHDX\nacXFnXgxhE2G3yRiBL8QaMnmM0jIXMx68kemw7Tk+cho6exg2v2248vEFgzu\nHimNO+Zl6To68wdv8MxwMCcafQWzKNlpF/WRyvKI6Y6FCadJqS5jO7L8d9On\nqaoCie9pHF7nu/9Yl09/AAN3147i4oC2ZiAZ+qL4K5M6nlDujpvHGQgjvYYM\npiA2h/LngrBITw5CX8deKZ26TnU8Mo0okLgFlRRL/6SFyXFnYTiZGGa/1rkG\nVeLs/cMc2xz28O5pYLeFE5KtfTOVaISDgRpjx6YK25pmsZkxJgj+6BjplJU8\nNevr7aDX5U1TXH8dADQ9SSozFURlHbEiA76gykvTO1GBMv7zmyd9vP4DUwVK\ncfeWbfp11laJgpednD3sgqD4CYVqJGxT3AtOcoWRZiVKhcBmFpzenNOPrqmh\n358kNg1C2Soxjob152JAwkDnCOm2q3aCrTqDRFwaaApfsDOn8ZT/6ESMXY1B\ndtmdc1Sa1rUCGdag3+6CCtRNVZCGhKqVzWkTH7sh2gaNtH0+Jtn2AwlSBJSB\n7XPY\r\n=bGgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSnJ+MeB4LnGRuVTGdt2v8YO68NO0fVb5sqYq/abA3wgIhAJ9cXkJsXB+MBc1J5U6PElvxv3VnDXcMjEubvjvw2pAa"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.7_1555207656886_0.3882157188020454"},"_hasShrinkwrap":false},"4.1.18":{"name":"@storybook/addon-info","version":"4.1.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"4.1.18","@storybook/client-logger":"4.1.18","@storybook/components":"4.1.18","core-js":"^2.5.7","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react-addons-create-fragment":"^15.5.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.6.0"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d88a0bc5c71f06d5dbf023efa58b9f3f0b58c0ae","_id":"@storybook/addon-info@4.1.18","dist":{"shasum":"6a53c86109f4aeda72489631b2c85d510fcc3b3d","integrity":"sha512-hmFDHOj946rGlprlrkpnHHMUalmswOqjiyyVCs9fw5bvkwcjZCPbe9fcMysvUWoKIIkUUcBtrSIJQ3v//vG2kQ==","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-4.1.18.tgz","fileCount":64,"unpackedSize":647715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctC/fCRA9TVsSAnZWagAApi8P/28x35Q7etfVhRTO1u/G\nXuvUXGw8IXGIEbx6WQjUF0rl97m+fjHVUKscxJRF/BbSG8k/LgSllGwlb3aB\nEIB2UrEym3GORdqdOl2wouvw1T9mKqDKlivCYs23UbRFQx/tQZbG/ImTl7Lg\nXBpGkdi+6oAhjvykq12/A4mJR4NtqhFQlHmggGKPLhnFprz5erf4Wrgb1nK1\nL3xYe7AzZ6nJdekcy8EbQS2s/pzTPFKPv1CoiUBzt8k427MYVx3gqLlPnbEI\nA3OXtTvWMuOlyfwMGlcmm39mLVrJ1uv7L2hdUTCcWOENlV9+Y7gnKosAjw36\nqszXZ3n6DpZlNBZAdtlUOIKmUVZR07UEDynUG/A/qZLctphWEFjNO8SDazwV\nLCCHDkb4oOQ2L3C1sASCCu1njyLivZ9Z+lTMAdb9+AgNnkyFL05Ov8qPmjBD\nXz6MoOrqi1Pd4tGRl/Tp4cctBFwd8Jy+rAYaUqb8fHBKOXS7XhFnnbsximpg\nJxYz9MhYQxejUMHr+kmh1wZ+gzX0nQLB8hyPAWaBFisje9kO4KFRC12IFuTL\nwPciPD/ZUHC7D1MErYkygxcxcAqcowk3pcmTwxHAr3qaIaXXMhvqnocS3CKz\nsaG/93VJ9u1KqF034/+XlSb88yyExu3oBUfHV6V7yqC1HeVGoySNLwonKfqT\nn+tv\r\n=lrsS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvk5NmDO8mT/vFeIMQzc6q+8OOeLYeTTLxMTWlRDEdUAiEAgesHtfoGilWF41pky+OJa4HK6Hkafx+gQAoR04DSfzs="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_4.1.18_1555312606324_0.11564321509086639"},"_hasShrinkwrap":false},"5.0.8":{"name":"@storybook/addon-info","version":"5.0.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.8","@storybook/client-logger":"5.0.8","@storybook/components":"5.0.8","@storybook/theming":"5.0.8","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1aeee184088d7e446d2733d4109ef7ca7826189f","_id":"@storybook/addon-info@5.0.8","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-yTihQFO+Y9uFl8ggnT7eR8RR/yNnI7ot14iRWPsBY9rSlZ/coXscolmaqY13/+IaaG2scIJl7E+8A1hSsN1Pgg==","shasum":"8e8922e8883127db7f05ad2b7c0417ce98228ecd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.8.tgz","fileCount":64,"unpackedSize":744598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctDUbCRA9TVsSAnZWagAAqtQP/R2hMG6L8ty834Kja/tn\nZnz/e9xiDJblXXBIjLj77H/QVb6pYdvq2Vw9V+g+ZULxjqygQLqAK63D1cK/\nrTENW7WG+zO6BO1Vq1j+uRLFSMnE4e5OBAcUAarHm/QqB+jEGRypwPnphjCg\nrHihvJoQMLuUoSpBpFOjhK0oqdJUVM13sNfwwktIyTyWLF73ew322H4n0uJF\nsTX4bZRebLlY/SfkMy404x0nw2DhrCM1jw9DFMqEuD7l8vKpk8qmLntVC83G\nf8opnRgcjw+7OCPgMyic1wMlichuz5FtP97tPJHy9xK7K1d7gnb+M9P7XKHo\ngaHE/kDp9ungah1e+UJax3Qt97YvDMfd4iqbgYgWtJeoz8JRUyMyXVOKJeRz\ngpJJmk9GhmkS8tS8VMJ+iZ+DKgn3zkx24UNPaxOBzfc9wov3+AdEBKxQYIEZ\nKCqFkg8mmcY+A/0psrXN3cLR+EbPXam7Y3aQNDTyNCyDdSL6qx18nE0QDGhl\nVTR/XnBIEsRg0DQtaDNX3JHPrlVVoRCiheioOk270XuT4lfPqcdYo0HbaQDQ\nPgxNYPYZs+h2BJJPjsvowHGL6xhCmCb8SSXiPMB1b5ugVKjgO5cAFec7moOD\nbqXXgPo4vDklxvzStoZJghK+JMTLm73oyuWyxABDoDQrABmA+260oVxFGjyu\nt2k5\r\n=9k5/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQ8jqEX0JrFroQZ+kdebXK5Yfd+cmDiZzh372v4Aab2gIgSIH6Od7ivC8oXZpqs/w+i5B6jjbOEbrQT9rDUD+bDo8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.8_1555313946666_0.7298091662471482"},"_hasShrinkwrap":false},"5.1.0-alpha.28":{"name":"@storybook/addon-info","version":"5.1.0-alpha.28","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.28","@storybook/client-logger":"5.1.0-alpha.28","@storybook/components":"5.1.0-alpha.28","@storybook/theming":"5.1.0-alpha.28","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2a55ee012f2243b7d7b24c192a7070e3d2824ac0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.28","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-g9RlffcbbhN4NX1mfqeHH+jcMU6cqD/WSaAVo/WeOyoi65N7+RLlgHVI98u8eRXW9JIYI76tIyKVjfbQdYbA5w==","shasum":"4dc8c89d0c202c3d6b217511ae54cd48adbe1f6d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.28.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctbIYCRA9TVsSAnZWagAA1fcP/A8izSbGpHoKlcQK6c28\nkov1BTE1z9PhKl8wAmgxnJktU6OmOsa7Z8+R2Jp3qNRjfB3GTXyuCaBhfKSw\nC0L2JQZxZwDtIgkk9g9bzK4v2zNFO7y/EYRSfYAckCLV3ZGXAalaCubGb4wJ\n8Ybkt4gxKM2PtkctgWEHbWh6R4ycnG4tSDB6SVauxIANGoUl/CiGJD8UR0r1\n8ZaXUymZDJAQAgEAPSYsxOOKqLjkmqUxkesNg2mjAWaNTPNz4VAECnTHMV91\nGwwPcwERRoqB/0XtXhr+DNwfdR59gIhwvzEVBL1cocySpuWIYusUyI3rRvZG\nJlQUqDPVm/YSJxtRRliL4VKntjknv/VwktU/zOAFEKdOOsNcBUExZ6h2Cd9r\nbFhxejAEWJG+BuPyyo47N2m0v9oNA6txhA+Vg+2ItpX9/fhwcqs0BPOSMNYO\nOQuEVwSGh863h/VCKT4blwsu+kIzYCSdYnQEAnkEVazMdmjd1PZZ+NKeZ0q6\niqKDoJhzIhRRIFWkTt/n0JWEc43NII7LDoq5GTrxK2JwrUV962QYNEs4Enrj\noA8jVohKctXWuVAOXv5FUHHbGXQ+VWh133K1zGp891XbAzYgWbAJ5VQ2q0TS\nloSuBr67GkxEwVgX4mJdsSUia0yZLcJf5Bk5pLAQEBQhIqICE3Hn80HQ/VqM\nKNsz\r\n=7Oe3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkQQCg71DvGkpt3hgx81iPD4DJM8xs3NccL1y6ysONqAiB+83xGeV7aj3XqCqgeqHDbpIWW42KfkuFcpMhMN05nEg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.28_1555411480015_0.5464493893894902"},"_hasShrinkwrap":false},"5.0.9":{"name":"@storybook/addon-info","version":"5.0.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.9","@storybook/client-logger":"5.0.9","@storybook/components":"5.0.9","@storybook/theming":"5.0.9","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"51fe8ea7cefd14694d130f840371573c0e9bcf23","_id":"@storybook/addon-info@5.0.9","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-R4r0H0iFGLHr84m1epmq0zN0YTv1JufKm0rkiJwVX0KJjKIBJJlYkqXcOrNtLzxguWDkn0e5mfrD9Qn3aKirPg==","shasum":"8996409436782e4ead2a03f2a0bc024daef89395","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.9.tgz","fileCount":64,"unpackedSize":744598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctmz1CRA9TVsSAnZWagAAcpYP/0wBcGAJvb/UQK/6vsbP\nrlFAOjSXDMjoAn3wp6cj99hI004xfdDpms2uUgjZxoHwk83BdAQtmSh0ggg5\n9S8wMkkMh1H8ljFhhz2J7RtX66FwJ5fg6Od9RyydYP407F60DQRSGtLh66XD\nzz34OmxAQuVLTM3UKmlvsaKzeMMfSRZhzmLKuM41FCKO9WTgA6R+u7fdLTPx\nPWWlgWBGF710C6szUXprLVAQb4lwBHqBAYR9NvJehtaigPcC0Wghd5KuoviI\nvoAxlgUyoiUa3Nv6tQ2goTocbowxNzSZ6363XyIuROxNQQcPQhlRVflU09VO\nhewqe/Geihcd/qtK6B5mr8tq/TGZl20NoqxSsJNMmXMHLpXNtJzqqRdPDyGm\n5+01pExK+Bhq1Vh9zDdwkiAAFBVSb7zcUU+xCOO2em6rS/DZ+uy4faIl9bRT\nWfdKnK85YcugTHpUmx3DTfI7fZniBGMScjkLrfrPJ6736TzWpBMLbRoPuZkt\nVuL45AYXiwm/LeMusIzy6EYeVaUpwPJl/tzmyYSVzXW9/6Y8fuHcoVWh1ZPq\n5XdXScmM3luZE+AxPwrXDc8zZL2ff0DhnDwO/1YHz9lFCBWMXxAjng3RkOqL\nUbO1+py44TmWa9BFJDeF2sAwJT2dPdbz0LyL7aqAGTQYAY83+ijbhVR6CyB+\ntapR\r\n=VNqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHch1dA2LRHx5rXvdVV7jEMx/ZuZUynq8GqMHoGBgiK/AiEA4H1ROcN4ZyL4xaErbeDoSSNq26ahOxfyXiamVMGdHpE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.9_1555459316216_0.669814904300114"},"_hasShrinkwrap":false},"5.1.0-alpha.29":{"name":"@storybook/addon-info","version":"5.1.0-alpha.29","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.29","@storybook/client-logger":"5.1.0-alpha.29","@storybook/components":"5.1.0-alpha.29","@storybook/theming":"5.1.0-alpha.29","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"93978131030d52c821db049a3891402949a8435f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.29","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-nP4h/5N0UafheIoXY8nxUl3CcYNgowXTjnWC1iyWyvTfA4I/T+I4bG+fr6oml3nV2I1YCPtw/DYC4RmdvbYPBw==","shasum":"133b99e7a4abe181b36d2ba0e358c408daf19faf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.29.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctuSLCRA9TVsSAnZWagAAM0wP/0nkFA+BGrcq7hf+q8wY\nZnMa9lSZxsd8Z3uAdn9T2EZs1FvgkFZvfyjyM97BqGVnvktra5UP/96rznsf\nCO7khhN6c/By5DVQKgFLuR46LGcKWppJsTOwWWWanF3RVH2kDYKSv40EbRs/\nbXOwdfWD74C7P7yDsM1RAGHzTwDzgQtbtQ9mHhpqCBeBi8l/mP9ulqaiOruP\n50R29cZ/ncta14szsJCqc50s9XL2QlLw/40eApUAK5sN7DskOGzuGv61V5FU\nuZ8Gocu6AQ9mxD1MBSVkAPG2VrTicOymD3BhAjQG2/HzIdeN8URZMnEcFv6d\n0IdLyn+QLDWy0ri/bRXU6cVCz3XxW7QtQqZTDH1PZT2HCCo9RJWvSFelOTYr\ntgc/ihEg6GnVEPLdiRUbHLQaHpwV+jO4c12KM3mgjfRfTYBNGthcK67J+HUb\nPAhRcg/5bxJrWpZDn1w1cO1hV88mPeLCCbVxUxY5F6uxJBTOBTb5nyGpyC19\niKZIOX+x9GUvr5sDy0O1UZdyZ3Hu7EUwwPXjW52zZfaZIByYKwrsfJu4tuer\n7WJMQ8qcfUgd5yPnVzSRWlqAhx8CIfS+W7n9ZXuu7gBrRRpH/nIx8JHvDF2a\nlefkSdQhAL+QfhfkwMwIYNqIbMS4I4jjZg/dJA2Z/SpO6Sroh+o9lFxiYzC0\nxELr\r\n=eTaT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW9iDHXAl+k/uPS5C7+cO/Qc9WgMF/1Wd7kCXhIB8WRAIhAIsrKejjdtyRjCvFkSggQEnAPQrsUj4mk4Re+EAfBptL"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.29_1555489930531_0.05592276054931089"},"_hasShrinkwrap":false},"5.1.0-alpha.30":{"name":"@storybook/addon-info","version":"5.1.0-alpha.30","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.30","@storybook/client-logger":"5.1.0-alpha.30","@storybook/components":"5.1.0-alpha.30","@storybook/theming":"5.1.0-alpha.30","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"da66766ab9819d0ecbb5b6bd5778dbdbf21acaef","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.30","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-uJGter0FYhRJveG9e5li7VUwx/JnoUdpx0hJJeETIffL9tEXo7mdcf4cvlHFQNzOV4/pTY6t5Glx2T8nEOkBGQ==","shasum":"2caa67bddeb6f5e36bc4b87905ab6590d324b839","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.30.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJct9FyCRA9TVsSAnZWagAASHIQAJ//eA/ytI1VLX96cCwF\nQH6GCBUae3ow1IQNcVW1wuIfP1ut0Qshl6y34Vace2L27Oje/WtnM9q5Mhq7\n5gQW9ZCYortcgSjkKvdSl5I8xV1p7OxZqMtAsarozMwvGD7VotCO6ZeAKW0M\nUNInYH8WcWufqaNNJzLuU0RZZhhHhFrL5FXor5kIW5jDqahJemwdfWB1PZL1\nRgrXMV5vpUq2+2wt53zuA8q1TkB2ZRgN4pD5jIg1/vaO6pcz9KUyK6e16ntm\ngmWGcHOsBjD7uU3VrpAb9v+Q5K2/Z8/LOlwNvC5BV3zFjpLaGzzBU8V0xmNW\nofu1hgIfK5aNTLGfP7FzSKcnz6KJbtkkwTKuMn+IsH6zVxVKxNzmOWtqYjfZ\nq4rsZBBKF+w3CgpKsA+eUWhCUYdnrmfCFS4xcpRY8YtgA31UmLHoNHvCUmhg\nvXQYuUnaz06eVBCbYFnkW8WkP5+35UR8/x8XbWsISEPW8J+sxftNCO+zcGw1\ntXSPK+D0VL7dlhNPK4ayL4hup2U2vBvSyZLo5VvaW2tKx3ifzfEYXhAdjRCN\nMLlGuSwY7968CG8+agVlVtuwqReqW4PEyugn48oMltPGkIaXj8X/byf1ZRy1\nXXWH+3Ksk7bF8AYPYZ55HHWqKOf3cj8H5elcBjwxG2o6NGth0/3GDya7GnFe\nWHnM\r\n=6Pbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDox/OwONTUsDFLGjFXwc7SbJgFwosAmyJwuAuoABuYnQIhAOhZU+fug/AAWBwd+XWwn0Th7zeAU7pFQxV+Mb1HQllO"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.30_1555550577843_0.3979378943956231"},"_hasShrinkwrap":false},"5.0.10":{"name":"@storybook/addon-info","version":"5.0.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.10","@storybook/client-logger":"5.0.10","@storybook/components":"5.0.10","@storybook/theming":"5.0.10","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4b2d44172e564e4ac09eac3dddb7908e4cacb046","_id":"@storybook/addon-info@5.0.10","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-pEqLuPopo42AgGVrCSmF/LLB9WrCD0BP/kdTN5FK+xHtRxMHBGMXfmKkErdeXNRWNgRlKi20iJfgX8n0ysxGEA==","shasum":"469fb109e49cad96181816372491bcfda72bdecd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.10.tgz","fileCount":64,"unpackedSize":744603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuBSNCRA9TVsSAnZWagAAJakQAJ1RpvEvm6kaiqD+sSrn\nWgZoU6eyS7bQK11rgJZHzY64jnG5O3KjJtHEtN6Itf3DYsHw1O1OtIq4T71F\nqeLd1Z7aE1+q1JVnVNuUAFUXEVDh/4u4a5nbjw+VvqdAqvume8bbPw/mPxhP\nXDV/EumhSssBrZLmZ7QERBLTVTFNKMc8grGtQtXFP0Df+6EagcrC3k6WWuh+\ngNonR4a/vEW/7eTV2QOErf2OpfMmRVIdtcudhAmDfB1LkRoPCxmkhjt+H24r\niu6zoERnmw7pBCiuJ6pPdXIiDZjVrKbkkoLTF7jinrdKU7e6FjMxqG6WzEih\nemW9JTCS1Cwm62JCgee1a1SwaY+4SQs3cG5JGnYvbBohpYdqYCWkBHXOmxVB\nougKxXdXzjDOJ2v+ENM0c/wfsE0oNNeRSkPjm6+hZHgqKOJvlKiTrpgmGOHK\nOS5rQMCLBU7EzQn196wUaKv4mABwjafI1LzU+yoYDDjGzZZBRkDV0WeR7Feq\nrLwZbDJaKjSjBSFXeBQsDWHi1VNEMjb+1NV16uTs2zftJWUg4MFC4ladK60E\nI3nG1RZ+va43rw9MPc0Y8v7UNfWTx0mAnAu8G2XgX5Tw52V0whTO/oqM4H3Y\nYCxho3/4IFjfY85LDHCgIxj2KNuYQD1KYVDFW0ZtuVaq5IRrNrVNnoN7U1I2\noiyU\r\n=Rw3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxmeMfXA7vr5HNc1TzTP1cGlhojZaD6Qy41Gk/z9v5WQIgeGAj0nw7bJlmnwTnsdNEJ9azIHNL9MKZoud57wxO8is="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.10_1555567756672_0.9205250413195945"},"_hasShrinkwrap":false},"5.1.0-alpha.31":{"name":"@storybook/addon-info","version":"5.1.0-alpha.31","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.31","@storybook/client-logger":"5.1.0-alpha.31","@storybook/components":"5.1.0-alpha.31","@storybook/theming":"5.1.0-alpha.31","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"72d852381151fb01043202d4c24394c863312008","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.31","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-I3L4sIPyq4xo2PgzTSh4FiYPvB/w59P5nLAfknwARmZPERdz1sEMgtnvfMW6KpBM2Jc6jt2zkSNDyeU6VHDdbg==","shasum":"bed336db24705845a4314d28c0199d9f47235442","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.31.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuVXHCRA9TVsSAnZWagAATIMP+QEp3d/5bL3TGzrv4GBq\n5NKH+ze6iJpkGrgj8PR6P10tobYpGk3XSsnLSTB7yDNWmhJwFEUAKTSIWWAw\nWYGqJ+bYVVDLHzYBGhj31dN3tBerrI/nu4TF1vt7Bcg0/QHtJmG3/UljqnBi\ndTVYHp6QDFp2VBDii2miod1J8N92/sKTmBJrpixgK+k+L51Q1+os5S0URyku\n1mQATKOlmdVlk/JQh/DefyyL7Qy9CfY+jXPYXuneigJvalRPKwhg/xt/zlQC\ndnj5MV0CrkP6OdgAFEDVaVKqJGw7be20UrBqcsM1dbRkBPN6CV421mdJ2zqh\n/RqQBGllydVkyz2ykJx+NYIwf1UoVOfrf6K9/57tQpkFXMlkW+cY7c0KtdFw\nRqFfylzzSRq796uw6gypD6nqaMRG5atH3+APxDTnnRnnKDvRpzcKWIFtXfoZ\nXb5fsSl9VPNmkvkhK4kqqz0s3mfEvBkL5pPT7Qie/yQgIc8lGl9QimeMtz4h\njFPtNEXsWvEWECzN1WgvES00mM74Cwe9OANM+E0q9vFMeRsti8ng8aVuT10u\nYu8z5uXRlsW/pZHVgJH1z69Bj3UpnNI8v4QUXhrVeyMAuzXFCXuueHl+LboY\nesjHaQrIRg6ABbafDbcBUVNXIKoSpUaqVjM+/uh1v52yODDuIVFqfGPboQ6I\nJM2v\r\n=6iIZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+gg8rE6dEPXXOXW2XekTUg1OlsTXwrjVX2AHKi+A7rQIgTJCExCrW6czBkhNcZk2tG5Sbt1d0luHzQ6XDrp39A60="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.31_1555649990972_0.34765821940126407"},"_hasShrinkwrap":false},"5.1.0-alpha.32":{"name":"@storybook/addon-info","version":"5.1.0-alpha.32","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.32","@storybook/client-logger":"5.1.0-alpha.32","@storybook/components":"5.1.0-alpha.32","@storybook/theming":"5.1.0-alpha.32","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fb2798685de5c0f45b40bdc1a1151c455bef850d","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.32","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-rYL7Gp+fKNcHCMLto+Vd9BO5yjc7RdMAm7VxNy+Yb1h6XsMIWILl2JwowtfsZQBqZQn92dW8oS8g4oPZXeRx2w==","shasum":"8fab84614aaa1a45b6f733deb6a6de70c4462e62","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.32.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvTMFCRA9TVsSAnZWagAA0yAP/2MB5b2aZcPrRa94Ipw4\nW7i90lMAUxRgYkZu3l+jTmdzEzgpEv9+hkWsuT6x79veVPK+o3Qpa/TOrcca\ngULLaYC2oAHm603Dhd0KosCsoQJ4AXyMeLRRgYWqwlFGkF6D/Tdu/vqglP5O\n3lBgwn1kZ1ubFtBG4gpy2tcGnbeZzf84J+aZWqZczhVfWNEdcifYmtR8Cxjz\nSJ9vw6mj+NGkvrSIDS/m1x2e9keLuGCqcBXCeMQIjBC9PY0EW5FDwYLzBxao\nSBJrHA7nLsBwjbxBwrCWuA7N35f8kDe+5IEAAhSaAmpTysojurE9DfD5NgEj\nL3hLLFmqvrvLgBb8c0yvTF1c/UsRsvWZzxiL7N9MEfOufNOZnLoMfDIXzUYm\noVIqznADs3OM43FMW3BRIRh041KpgbZcnVs3u+bZ5spz+z1FjNgKMq+48sY6\nYOgpV8k4+G0Ut2M2RPy4IOrwmUxpS1x5Z5fU07gYM0U7djmQAqFl/tf9IXt4\nutHw5lH8WvV1OIdcSSzPmQvcNNAWzjts4/3dJnsgFmvT23HJ6Z+cFVlyvI2e\nIwRpC0bM5nMsk0SMWh72CcLDt9XSyvvNTNgFSbE9r7zzQXewq5TM4OX0FSiy\nf9ND96vsY21jma33mMh00Lm0f6mkCkjQo/nBtTNt7Vb1RKR0W2NqwCe0q0ZM\nS5j9\r\n=+E+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL9g0+jRajl6JmpZr5Hm03Ymk+eaTiBkT7ZpubUsHqtQIgZ4BsG//JqtK2VnvDgaaG2VqlMdHv1204QReIfb/584o="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.32_1555903236878_0.9394989640624674"},"_hasShrinkwrap":false},"5.1.0-alpha.33":{"name":"@storybook/addon-info","version":"5.1.0-alpha.33","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.33","@storybook/client-logger":"5.1.0-alpha.33","@storybook/components":"5.1.0-alpha.33","@storybook/theming":"5.1.0-alpha.33","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"23268e4fecfd76db92e85b270b689368fccf8caa","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.33","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-VzHGcG2KOGRwowIl8VUE9t7u7/x+7qRKD9SNFR/quq6rO7xhdSqSeF6t/PybhTpsGSLkj/Yu6PktrpSJOUzIVQ==","shasum":"d2c37f8bba6b2668292e5d58ab02a88a146c5f54","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.33.tgz","fileCount":110,"unpackedSize":893180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvrDtCRA9TVsSAnZWagAAoIAQAIPXkBJn+j/a03IaAVAQ\nnBIcOL6feuZAMiEXsydlxNFLayUndmoGOT1fKaOpTPCtBv4X727EPojfzrD0\nnXwr2G1oHXKUaQyzlOOPUG/3JvnNYIT5mEOxnOPpcFIaZ7V5AmdIU86ADAI8\nmKdFLbBUJmEOBtmwgC6gA+Ol+dcen76lWBvMQo39WGhiQfGD+ty6gaSFnLob\nYsiJYW/XmAaysp/cFihDbPO5O9Z7rOnF3auGkRasI5sQ5pRGf3Yu1YaqKkwG\n1Z/xbOqEwnVYkTuE0UlHJdklQzb62Jy8zxMloryMgUUu9PahrQqZz8WJyWBU\nLJkiPBRRsQy98IK7Ni9n/YZg+aCsuQWK/MiW7UpQC4qswSmWjvKluwYyx+g2\ntDWIsQR809vkcEsVJuJFNaRrILtJNcaGZyMQSOs+nC4r5A2jcHZgIZjmGSZH\neRxu2BlbjdgAF3iHTk6EbrR1ITzG0AKSwEJl9xl0Ap99oUVtHqcqKynWocbP\nXEuC2AHz6iWQtwiY4ZLpgcY4P4BLR+lG8/x1EkF+lIoj3E4OzmVSvZfY/wVE\nJ/d6Yi57R5pp6yM+jA+zXwE+m4GEblj/t1C6nfkSoGprGbveJlGWzA3Hgb1R\nIGeVDkZwyhfzacOs9LpuieTkHiDksoZopZ6c/ZqRIYOfOJvghdPUpr49Wfjt\na2T2\r\n=3oZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACBeuIcSs+D6VrZ/d3YsaNGlu3Ehib0x94COQ9oS11hAiEAsiTJ3oNEziddOhx/S4MGHzOROw9YH25uDLxF5OqiJ54="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.33_1556001005045_0.24362651278117808"},"_hasShrinkwrap":false},"5.1.0-alpha.34":{"name":"@storybook/addon-info","version":"5.1.0-alpha.34","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.34","@storybook/client-logger":"5.1.0-alpha.34","@storybook/components":"5.1.0-alpha.34","@storybook/theming":"5.1.0-alpha.34","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"694460c087326477e6a71d8f1570196739c23f22","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.34","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-omdLAHMBIcvtRWlKqh513R0KvYkh0u9xgUgcl8IdrQcbOXFkakP61x6eTyRbvZt9/gGoQSs2d61LjNL9lLEKrQ==","shasum":"646c9c5d494ed431555fbce95367b04f7d3452cd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.34.tgz","fileCount":110,"unpackedSize":893402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwHuOCRA9TVsSAnZWagAAiC8QAIEio9pHwkHkWjKrusRO\nSdnV5YjqMh2h8GMkdzqGGHsAXIBUkTvh4qkzLlT0qhGJTVXRTS9RyIHGY2TN\nas9PezVy7/oxyuqDyK6MRJbvoUBX/SrZH5KzHCh3fHYBRcJuxwoSVsLIvqQk\ns4fnAvyL3WpVJMjwiHLVClh+oivqL7HGOCKmIU+ZrIT4NtATpLjjonpLfccx\n8i4pz7nMDlkKSCXJmNNBD+SZLZz/je9Fpk+VKSc0BlfUAEnDSzEe/zGhgW6J\nPD4yX9l9H6dKhCw2keavMMESDWvPxN2L2uIdy0zocw0FQhg43PR//yrZKJ4V\n8ht3yqFLMyWxHsn7bK+Ebzz086m1mc6E8DxO9yFp8S9rRkuxKvCa+oLw9yBF\ngv7cNZTvWfyPX/eciAP2oZxQ0trFTxRZQ2wrYgLzTRJet5sshzAcv0fCEgml\n2Wiam5CMxz85impkHJbEn1R9B01aLIrF9hlupX9WFUPCEHciHvNtafEo92IJ\n8lb+Fvt+40YaUcZFOuOVzVa4s/Z0frbPkk+aeah0xbXOjGyqh88pXVeJ8vBx\n/NacuY7OPOdnrSBhgmj2TULMnEGWS3FA/8mF81ZCQwBMlhKH9dSsQLVAuL/0\nW0Ho2J33cJPMyNaH3JsQ05x6pKKytr93ldLytOKYZjbfQUIvg6DAPg53/xsC\ngXTI\r\n=ZQFk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaZOAcpHQsfPnCk62FkLEOnzb2mfEjxbUDXzfNSMsIXAiEAjzmBlJV4z8XDunBMcgPrbODGm7XPfMYmYOt+7O2GGsE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.34_1556118414283_0.8893762930192637"},"_hasShrinkwrap":false},"5.1.0-alpha.35":{"name":"@storybook/addon-info","version":"5.1.0-alpha.35","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.35","@storybook/client-logger":"5.1.0-alpha.35","@storybook/components":"5.1.0-alpha.35","@storybook/theming":"5.1.0-alpha.35","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e20d20a2635b442f47b95a4ce0f436491c0effe1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.35","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-6A2ZCH9oIrKPUyYzGqUkYcgSXA0ALBoFXDdTNjVuQVATPytsJOYMKHzLG689m0pe9hw9lZKDpE6h+dqHYflF6g==","shasum":"719098ceb1bd40666f0b89b4b371da4040374ab9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.35.tgz","fileCount":110,"unpackedSize":893735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcw0DGCRA9TVsSAnZWagAAC0oP/A3xCVQa/umCirRKdPFB\nIIImcxXCAlG4OkNgNitF8q3cG2uCwOafR1A7NyUwd4AYtJgC8Pbac5Glu4i2\nKHag7gqPaP11JrfU7PsIxTxajT8x5gWJPyv+mjSDnYwL09xJHSdgo7WKimRs\nnmkkdpPm+rwn3anKCQ2rcrVLffMt0QIbk2UvlPLp6bW6ULCvt9F6Oesw6ZXS\nzKWs75GCKYvfm5NxA0HrLR5UTOxav47xnkzwSXnqfXHF5Nu7pkLKSCfBuKW2\nsp3UlulFk+9+ypnGPnwvyNbLgZIW204rIkFEAUm6WH3HivG9Oa75NzYNlHl7\na/tVS6dATJbJSq6MjzgfXnwK/pJmWEwHkL3hEBkYZqswUZWf9eP5CnGKYYFB\nixLsuvjO6Su+IlnIOFqTdmM+FzevyozQyWVKlsZtCOjQhi5/lv08uAugPr90\nLNX/C6zkPRWoGc33F2Q71KvqQjqJXqWy75/ECWNaJ1qZ3UPv8XVOF4P2A8i4\n3KB4FrcB+Mk9SyyDEkeWTO3XSze0pj7kCeTKJaGZwiVes9SHRNELdqFUJpIf\n0cxvlCR31pWjLM4MBgqhO24gsKrL/3y1kI1ATZk185zgjylftxgh/AwjvzKu\n0aLb1UAC7KdvZHoGny6aggynhSJjSsqAjHfGDD+MLaNxoos/JKo62Fv1/nLa\najhF\r\n=cwyn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmqCZQZokbLXskjtdJq/icQ3Yd1e+hlHZ7muuJgXd12AiEAhpooR8wcWag3Nep3AoCBNK1QLd6Y0N3AJl4j79p29Ac="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.35_1556299974024_0.013900591345991531"},"_hasShrinkwrap":false},"5.1.0-alpha.36":{"name":"@storybook/addon-info","version":"5.1.0-alpha.36","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.36","@storybook/client-logger":"5.1.0-alpha.36","@storybook/components":"5.1.0-alpha.36","@storybook/theming":"5.1.0-alpha.36","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"dd97c370e7f16ace596dc42a4a6b1d7e37a4837d","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.36","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-U+2gMI2pJmajP10yCPGZEMm5+4FBcUNkCWo2ZZ29aISvaX0qj5xOeVHBW/AzS6bfJ7hNvY+TeC3njRt6DKBxmQ==","shasum":"c43881221707fbcece5c9ed57c44ce67ec259f59","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.36.tgz","fileCount":110,"unpackedSize":893501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcw+U6CRA9TVsSAnZWagAADn4QAI9iYCEi4DzsPqVSGwbG\nmqQvetykbPR/bUoGRSUivFkA8RhJR/d82vyi6IEo1JZQ32wh7XGWSFmCh45/\nWeal8lWW4SOEBI0ZPbh9o+SjvddYQ6rTA/nLqGqH7792gUsOgob8DlnwJu1G\nEiSX8Aly2TdEVSTdFYs+6dqmBaUr7bwvkY30DO0+58j22QcoPno9LJtrxVJx\nvFFe8dZjUNJ61+mzRCaxepbd24AzTY8l4QllBTU9hsCuCl4nZ6KZo//nXHrp\nHmNHEiCyUi6jjW5rVPPmatVa0JL2ZNN+2G00BO/9LYiGKMzLDgT8wt/PBNcj\n9cLa/Db9TEv5nMMmQThSViyDAjiPAby8pYEOf+I+hbAvJSn+DoIpNHlcA7hV\nIx/lUBR9tNzarPUe61bMoiS5sU4kHsnbtpn3Te+pE+K59A5br8fX+4fqnxKY\nlqx9HT9LHO1RhfnMlDegb1rImpYreYgoNREVv+7Cc3w17xfd8Jqk1uMoOp4L\nBpsbcG6Ku+pL5/+8NdZzwTqsh755TM5EJwdznhi8L2yUmcObg9T0V1JVRgGF\nEkWHOPDAoqMh3BXU9I+6r0x+L9dAyHwuAwdJeKlkmUW+7ZnoB6tezL7G1mwv\ndg9u9EH76vW1ut2D2xyr89QJTyTmVwL2rbytnzK9b986y+gA7p3wNHhAlr+o\nja76\r\n=ZnVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCiNkP38cRrFQNFxqLTi3tnnLzA/m/Zd6bXtLDt32qhAiBIh5hwnoN0TWMqFcgbu5EJDhBkzRO16m4T2JrBEYEMdQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.36_1556342073867_0.3170815261609463"},"_hasShrinkwrap":false},"5.0.11":{"name":"@storybook/addon-info","version":"5.0.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.0.11","@storybook/client-logger":"5.0.11","@storybook/components":"5.0.11","@storybook/theming":"5.0.11","core-js":"^2.6.5","global":"^4.3.2","marksy":"^6.1.0","nested-object-assign":"^1.0.1","prop-types":"^15.6.2","react":"^16.8.1","react-addons-create-fragment":"^15.5.3","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.1","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.1"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"17b0a5ced1a92d47420a5e32c981b4746c0f85f4","_id":"@storybook/addon-info@5.0.11","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-lAz0zranutGXtoBbKLIGA4nOlb9YfSDu24A3uR6Q743LTo/SWUiZW14E+JkBkNI/oReev8DyvMSL26t8Z9RlfA==","shasum":"d051fdf2b9e6c15b0bc4ef2a23200f35f1e1397d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.0.11.tgz","fileCount":64,"unpackedSize":744603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxRqYCRA9TVsSAnZWagAA8jgP/jJDuSmgU9fnPzadl1YK\nsLGi8gpLdxD7HBIL7qxDdimeIevDf2wiIS5HD/XIkKl0992QODcx1PlWhVQw\nCOCTjUEpr65xcrX2gU+AWZcW8JkDSf9c2VHgtIcZs35ghbORfeu3m3ATruK9\nWQeKryjQ88w7TRa7m27PgSJA+10a2i0YchOMF4CNaHMyrUVU8+GILiv7Qhzp\nZh+FLtQEWhrRJ6L1jADABIY2IsEIxUuAwuhqBpnfl/oO9C06+PzvfQLtj9Zb\n43Xr1/RzdKm5U67Oyr8sTjZoFbp9Rm7WNPSzlaNrLG59UXKSb0nenYsLWWgG\nYTrCYlN5Hp0w6jdNTegNF3w8u6sYJGkFlGs7vhuJyyDI9coNuZMXCnsid7dz\nH2Chkm+1d7L7HyhNRHJ10navYxqJ7gcsphYyZBnrjQ90Nac3fc/CTHzVqkxA\nwlljRBDL7qof+/hgxcvMmslYvbN3qb5tgcoFam9CZ2xfAfw79RLMaogkvcsJ\nn/2VbiKDNJXIwx5qBx78wdtpG7utjsZfcluhFAjwBsr65sbTjX+PCsIRYU11\nBFH6TNbFYXP4fWmzJhihAb+g1T8DaZ/vSBKb35G5fm2EVO6vWXnGT+YlayYi\n+E9vCEsPrZ/g9WulF75mc8mznnZhKXRxv1r30xIH7vEck/NjwBRN05sB+8MP\nXbps\r\n=DjuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0IciycHRierA1MEq9O1lqLTeeIW7Z01yADCGY2vV05QIgNpZLV1a3fbhhhBs1aI75Pc6kjhc9PUYr4PLX1iHn/1k="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.0.11_1556421271526_0.7352855319328306"},"_hasShrinkwrap":false},"5.2.0-alpha.0":{"name":"@storybook/addon-info","version":"5.2.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.0","@storybook/client-logger":"5.2.0-alpha.0","@storybook/components":"5.2.0-alpha.0","@storybook/theming":"5.2.0-alpha.0","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5366b8d992e80862f2c337abc2da70b01bad8b12","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-NBts1sMBLrBCRX0VuPTDzk5/rc7SIjhSTlVyq6hIFgjQGrnDCaNVnnpitM1ryXaKFkWgA8b3DL2TaYKb9Cii8g==","shasum":"4a645e9dd9232189e574cffb836b4c23972da2c3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.0.tgz","fileCount":110,"unpackedSize":893496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxwppCRA9TVsSAnZWagAA5ZQP/0aKBtc+9itXu2358H+x\nxsprwGht4n9Stve5TfQ3ygHwWx+W0E7bBVNBJmM0NBHf0f4hXYVjoDTy030g\nMvnAY52zGUSfF5tU30AkJmeODa91448dzPBocZnSyOiPWbxI6+aSfZxzQOnp\nmcDAnOsEH2s5TzNsBnQJ8wGJzJHa6OWNVonknWtii/8NmapjmddPIYAwkP1L\n7rDTJ+sjCdjcIpWG83Nk9XqcqeRo8vBo9dcVYl7uqQrMOfadOwxjnsCePJTV\nI0K+gow01nBDtPirofX4V9KHhOh0Tm6Hx6OakBttOn2BQUyJeGQyJcEUkqxe\nodubuaaFVEmfgo/blDqfi4hMEn3lfU+dc8uuhhpcM6X5ccxl7ig5amouNh7l\nuwu5ioOum45/oYDJbfiDCmTSTtTOrgoQc4Ee0O2mf6zEgKQ+NY1iiyBR5YMP\nkFzKL7XMJ/qtLzsVW7hEurnrDwgXed28Nbi3jWaV7AAH6Vquu3zLbb8w3te8\nRmjmZNxm3W1o/84AIIYbVOJU9YMXIYPblYBKP0rW5yNlC4uxE9faLna1rvXQ\nikBS4GPRGNFurVcG/R7lFlsXI7hSX9SGqCwbH2AjOgcHm/ODA5Z97GOIKhWY\nvdTE/Gs5XwtPyl4s+eookQMCzUtYekk/78OT1zuHMXo7DnPGrXaV5U18LvMx\nstGj\r\n=7Kns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3aHdew0qjdDuokDQEjLIh1sT5U3qvzyjT8rDa8HYAIAIhANi3cV56h5u03NP7BaSLDw06sLsw3vxLsp8et9v1TcFG"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.0_1556548200249_0.4799713339294229"},"_hasShrinkwrap":false},"5.2.0-alpha.1":{"name":"@storybook/addon-info","version":"5.2.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.1","@storybook/client-logger":"5.2.0-alpha.1","@storybook/components":"5.2.0-alpha.1","@storybook/theming":"5.2.0-alpha.1","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ebb70bc8946f4bf0cc90496e8dca45968f681909","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-l2Oe7aqa3h3rQ1+eNgIfl4XHvNAFw1gd/IUpaVvYZ+t1zkn7CZCGdsaylCLw94OnGEw5gYS4aBCibSVuxRqiWQ==","shasum":"1a58856b68616fc6766f723e46ffcc2a298f8242","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.1.tgz","fileCount":110,"unpackedSize":893496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyCZECRA9TVsSAnZWagAAF9wP/ihjL/CQIOIDAmP/S9Ao\nGfxsVPZ0IRyHkIo7i7SyiD/tY84srhmNXbPcuE33IVd5OebfeWE/3rFFNMKW\n9KO07VWrT3qxqpbrpzi9772v5KMdPLWDXLpWbmnYT+TWaOI920BWmWnjNcq+\npRLq1axuf9LrGERxZR1RVsORY6UdE/AvobbvZDXu3DyHFIiJKh3ARFYYwgeW\nrXWKIVmJg3UsHUC9TtjSshePAQ6tbWoovxdhwf/34GB1M/7uc2Vx6UesHdn9\n6X/Y7i1hifxbIjwagL85K+oQl/rYWoCw+8NqX/yX8vgMv2A/LQmsHdT3HzmB\nIqy+j8/p92rCrlVY1cdBzh/kDRlsEJuBnd+t6asqXwzfhE+r9RNiOjfUBcNr\nb3K/4iGmZgv4o6FcDKBfH2pH4Ob7isCNphdi+tLqlOf8OwSkmRz+g4m4pYZ9\n2Z5ByMarNTV/eYgEVMNDDLYaCn6537AlYZlzSRGxWpNipUAQTClF8gpos7JL\nBIVL8SOFKIDINJMZH7kmT/0aqLP/Ow9fXd0Rrvdl3t5bfa5GpvsitHs1aN1G\n6D4psuieyMHRk/PhpfvOIexBwik3fMzDmbT4RztCctNU2+EBbg/ocFtvzqz0\nt4o4KdI4fn86jGIwMhz7DNsHuL9gvqPYFbtN7OSJmrOoRx+XOngv/xdm1Rgu\nHUYQ\r\n=qmqJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeihHGLU0dYdIpJMo8+PY3kELGmh59jeceZa9aOy/GUAiAeVoe912rpV7kBUTpG9ALbGmo61T5U1n1mXqC8g+jvJw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.1_1556620867904_0.45580114487461976"},"_hasShrinkwrap":false},"5.2.0-alpha.2":{"name":"@storybook/addon-info","version":"5.2.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.2","@storybook/client-logger":"5.2.0-alpha.2","@storybook/components":"5.2.0-alpha.2","@storybook/theming":"5.2.0-alpha.2","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3bed00e28d1f80aeba6cbc37a5b43f5e32478f7d","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-oopW80akZwlEzBVDYW71z4X48dC4f/6PA1HoiJ7ftuNLgvuIPJC7NlSTPyBNSX6bJEiS91VbfRtCviN+XF1hlg==","shasum":"fb252ca832dec864f2d84f46f13704489c2e89e3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.2.tgz","fileCount":110,"unpackedSize":893496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyDneCRA9TVsSAnZWagAAd0wP/Rk0BawtBQzPxdb2TSs9\n9mt/okrzQlLekKU/4aivlVmA0AFqexEkS4VV+dwvXBq1XG8//i5pu9DVGAa/\n8VtfFOoIMCw7Zshlw07ReBIIJkqGJb60xiUA3wg5gbR0Yfz2HF1cYcUVP5SE\n2XuNEjrlVmZlhiwKLpCbUntgVHCyGA+w25SuI1rUITHvMEO9Q6xL2BtUitUm\n+WT2DcfiDQ+Xle9vtMm+0dLhGhkPmRgnTyznJP4cN5Cp4lxNeKoF/LfQyDTv\nBSuLTRulN0TmZJV8xnDbHHp4GpRIG0KuqvpZhtSMMwmW7LP2L/A2536fuBNU\nsDTdjRUbrKCfcDjHzOY5TEzgjzhDMGpIBb129qcQo/CgJXb278G4MVzX4ssY\n131nCEIaV/yilBmnp0OdVFbCmhUrs883WOuoENk56PVzJ4h/iTo4Yj/EIgve\nWuMEgmcyH67Y4kI492ztR24PIU2pjvDZByJkA6nSD5BbP+1pIjNHfKIkzhGX\nJhoWN35YS/IztkfOXDmmR4tq5jD8ilx1/lEtLi7IIGV9d1kLL4IRjBcsGycK\nSrYMajiPVC1sDW7wzp1saS85AsVtv77AjFc7wW5zTFtXVHj/SNqRikKhFqsk\nCcSdsPHIuuF4YP5lxSovhueQW0aha/7m29a/aTqUOX1R4mBPJvoMWNZGcyPj\nBEl7\r\n=Znr5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFR+4ZjBrnn5Oedhi/GRmzlD3e0LEdFzYg2vm5yZBI+QIgaVtZeYVD3rCBjbspzfeIPq/vc+CUOYA/2fJyvjvsbXo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.2_1556625885528_0.6288342791517594"},"_hasShrinkwrap":false},"5.2.0-alpha.3":{"name":"@storybook/addon-info","version":"5.2.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.3","@storybook/client-logger":"5.2.0-alpha.3","@storybook/components":"5.2.0-alpha.3","@storybook/theming":"5.2.0-alpha.3","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fa856c7bf4aa33d90cedee56bff5fb4449fea4a5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-nsJ1O8bf08lhYFvJn+yOOZ/mFz67sTi7VU4T/woKZ75IipSm2JqL1r6JPHnL3UMqqypMe3xzD4fIDeJVQHqLMg==","shasum":"6b497e34ae94d71b201385858b61171706290ce1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.3.tgz","fileCount":110,"unpackedSize":893496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyWSMCRA9TVsSAnZWagAAE9gP/ipyb4PtjVlnX7S100NE\nQBsXz5z/ArO6cyKFXA1SliVZsxOXRxGr9Uunu1vnWgJn7z4Hk9mKtAykvbxW\norj2m9nJs4tI5b049dSHVbuLXccMt4sGbjjXgAeczOusy3lUvUARLsON3IFH\nTWZaLfwBW0Oh4zTa6I/7Hhsc5i27JV9Iuh5E8FamHcUzvl6xt/GaqzqFQVzm\n2F8PAYITT3qJOw7qvb/zL0wQDDFgapHMp6eRUNl/c9I2lMjw5ejyeTZ6vhBh\nSANbL2QLpRaOrADa3mseNV7TpOPGkggwEHIY1WwbtV+vT0YwfE8pZpI9hVju\nw1axKeAZNSanMp1WqdKP5LtF9T7YByx1ZXG2M3vNMCgjUM2cqO5gddrE5NHa\nstManPRAxx03zinjfuiFdtjlGooSn/Vcbc7Jnr+JTPtFw0lqo2Y1CQt1f2Fl\n4bcmgQK+9t9/s4cF2pM9lgrbA9tJj8D03pHwWA1LMyzTYJQHylq8y1bAtcPl\nJLxD8aXxdLTchJ1tP89mdbIQuWC+ozfFfKkm6/QqizmuTZnbxYo/hxrH4wG8\nQ9zB5Bo9dENpKVzW4g4jKfBZmsqAT/c8WB05mg+Kg63aKV1IXdJOTiqPSAK9\nicZBgMUtBpGB3PuZa29HZOlDqCHNtDWakdA1Ef0ddQ/6PHx9kmfYis9qyU/h\nx0bO\r\n=OViH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNSPqWNHnHKamK+SLIM7jllFEUlq6R/EkY5Rv3EhEirAIgAgQm63pqKR/vRaSy4Z+PLbxj9U2ncF26C9lUWdITVRQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.3_1556702347652_0.6809255686687197"},"_hasShrinkwrap":false},"5.1.0-alpha.37":{"name":"@storybook/addon-info","version":"5.1.0-alpha.37","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.37","@storybook/client-logger":"5.1.0-alpha.37","@storybook/components":"5.1.0-alpha.37","@storybook/theming":"5.1.0-alpha.37","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ccc1d429482cd1f59af42eb60efec3fd5573bce1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.37","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-2BvToG9YZfGtEZlrOIrFke18nqkygQryZBuNzXqDrZZkmOZttarqodNPOcB3HTOQo80FhUO4V89Uyphmuiu14w==","shasum":"3ecf29cb4707f7d3975ef8e210ac6caa0a22aa62","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.37.tgz","fileCount":110,"unpackedSize":893573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyXyrCRA9TVsSAnZWagAAZXAP/2NTbUOUXzbOB69sGolA\n+RdsiyZ967d4XHZLLS1YRCKFaP9maFp60GgGYQ0KtxoNlmB/DZJkwVzenu56\nH6Ry3s9o4Tdr7hFI7YGqiKs4wMT3wLnTfb6VKNiA+IoY+nSAlr/OCSi43k1L\nbhubyqoDEtX4ZOZp3uZQt+LFiQVKaomm+6+5afDtY4Dr5KJQ8U7Er8vl5v3g\no937VqXtGqJBCmUF8OBBDDYwSP0dliyK7ZXGdlkmK5QnEklEfEmIuZgFaU59\naOiBd82N8x84UswVcEruGH6Ull3kUQm7bRSGjbp8cMk2cbe6cpBUZI9mqMql\n5t+4HdETbE9slcUd1gQp1ybniLatgJe0odVIk1I/enAR8FC6zE1SkJEW3A4V\n1ELTTuez+4fEiaeKZ+2PG2aWCnwQmitwfvNJ/bpaRh809mIafPqXQkKfc2ah\ng0XMJ5BWzrRME74MoPjwce46NmHKL/qFo5XlMRH2ABmSN42vmsu56SpwRKOR\nk2G14Zhx04s4zKvImD9lD1qxgNN81SscAJZSi5Hn4D6X/VOeAHiwerSEKnuc\npjZ8qzen4z8TQ1GGMFFvMLsQIY6nAnH60K3l00f3Y4nCoGdE+DrmRcWESlB2\n0b43R2i0kd/Pd1gSA5HaK738batAhAm+JciItfJHngVN4XAxoiNm5e3ISsQZ\nHCWb\r\n=aoSL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+MlBrgepff3461pgRmd49h698a/Ltqd+6YnhyR+N91AiA5zqEiJi+CHAqph1NHnfx2j5t2JTtu4mwlG7nBTyABkQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.37_1556708523215_0.9908473422030846"},"_hasShrinkwrap":false},"5.1.0-alpha.39":{"name":"@storybook/addon-info","version":"5.1.0-alpha.39","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.39","@storybook/client-logger":"5.1.0-alpha.39","@storybook/components":"5.1.0-alpha.39","@storybook/theming":"5.1.0-alpha.39","core-js":"^2.6.5","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d2039e026d121d27376fa405939b979a9ea43a2c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.39","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-rB8mXtwxcfIF2PxpeGzH9drqOQNBew0HCPB2w5DCyzMfXjaJZZhWIc6sNsMK9gQiGLCza7+5OTeIgEJNxfg0nA==","shasum":"b37e2c50d2ed543cb760c58441eb08065280b649","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.39.tgz","fileCount":110,"unpackedSize":893573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcypCkCRA9TVsSAnZWagAA1wsP/0qL+deaTkgimocsqCCk\ndAvjPHgFNspkAgwz+WsdggSyHu8P7FkZyKZHGX2XmqGzU8VCuI+Es8s0gy2x\nnyZZrcHoGah2CFoE83AJLVTnniFcQbfYQCBeoHqEYoZLoJmScPtdktAQaYb6\naZs9Jq2IyjX0fRPa6z4m0EaOk3Qm7AoYyq4jIRb1WBzvT9aylCZs21GaR1D+\nS9LwcieriAhi1pA+DGNtyzFM7x9VbxmKIAOkiCcHehin2ToHJEKGwyJQamce\n0UJXJN4fc7TUf5K6FCx5GH6g8Dp6jHIOaBfzEoAzU0YMzQsVW77fj9M16txa\nuOJKAuQjGSWrEmRc3llCg5XSK0wt00S0MqCOTuy5qXiRy4MX43Iqb7zMIdAk\nbyoG8YzXb8b+BGjLv2OTaOEJf82p7kRZSqNvI4qclJMIebjsd+Ar5MBcJUix\nvdkSuaqtPWUlRa4wiH++vLZkmX0+RkrfxAuuw/Ei/OzDuz6ShKLYUW6dvPDP\nOyfyLJ7E9u6XSLO31TzHr16WooGhBSveuYhjRP8vyNYqiaTdBpWIYeyK71mP\nqx75Hmcpyfmp2zSXYfZSkp67h36wHDL8FbZ1lCaU8r7w8BFUD0473GWwQC18\nJn8I369HBLf9Ve2fmfmEgatHNWwSwKEtu5qlf6KxkXbM67JTA+BLVUvkdLwA\nXe45\r\n=1InG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw4NkgOk5fb7n27uv1y+TkCZ/zn8qnixJoOHVUlgB92gIgB7iXkB6ag0CXPUwDFJljoU7hjWtVblbNIT5pSwugtQw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.39_1556779171206_0.9602551921939935"},"_hasShrinkwrap":false},"5.1.0-alpha.40":{"name":"@storybook/addon-info","version":"5.1.0-alpha.40","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-alpha.40","@storybook/client-logger":"5.1.0-alpha.40","@storybook/components":"5.1.0-alpha.40","@storybook/theming":"5.1.0-alpha.40","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d4922ad48198f7246d70eedd60f1ea39623c48f2","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-alpha.40","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-5RQ3tqdII25Z2gpGyy5YNwdTjWgYPksyurarLP/MtyrwiHoZKO+CSxyN5WBPTq9b3jHXf7wZpmlXPEz6ayFjjg==","shasum":"a595bb55996e9fea8eabae6b9d42165b343125b5","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-alpha.40.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0vdtCRA9TVsSAnZWagAAh1MP/1g1gVRtZjwi3jEI2Jso\nTaY+NEquy4luE4Tmg6kOz06uShix0tubP91CgdXCyXGz13X+/s2uoFE+qL/7\nk/xaQxjuNC9VBCe4QFRiWoQzFwPmKr9vknm0bNvdhteatmARR+vjMvvLiYfH\nyAtLeFrPzqXu9ffkqp7IvYCeFzBKQ1Hiyljzt2pc6ukMp79UEz9GOEucdwj2\npRO0yxa0DmoceXU2oJnwqvVsJbAZUP8bj+K2pml0aX/kcgcX8cCUKnz3e/vf\npTUmRtybHEccpsoerbshsJhIDXbJ0nc4G0jwyj3Hfh56p0/sYMjckimpKeNP\nKh6w41HetnWOrE71xYQCbXd9IqPzHiVtmjpxJVFEGm1agQaDXNNgG96R+f0V\n8IYP62VN92ieq9nzhAOrp9A4cC9QnyZvri95+q1A5+317rfQO7153S+j95J6\nRv6KAE4Hc85lM8vYHLdA4J/QaQ0gAOmmgAUdikrVk+/+vqVl5/RGCatV1alu\nPgouPlkv+ZJh75kZdxHYJE8x7aavxPBhes5zaCfHlAanYoSeVgit483lkjWZ\nJQgnYCEd685oR8LEofVEVUYk5HmUcrLwNxYg+FZKc0dB0pUyG4w3wr8qfCUn\nk+NNoUVNd8qiHLknd4se9hBmdawCxOmWnwD8Zr+2/ZHTv4csKWoXtJ+P8VbQ\nf3oW\r\n=dGHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiLBPCpoYIfPhw+hoaaLSzX78BHMksUB2/vjzTsDhGBQIhAI9exUtucGACLSTwNMKCmbxV8Nn1Up20/JXB1cwBSkCJ"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-alpha.40_1557329773030_0.7002205678621907"},"_hasShrinkwrap":false},"5.1.0-beta.0":{"name":"@storybook/addon-info","version":"5.1.0-beta.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-beta.0","@storybook/client-logger":"5.1.0-beta.0","@storybook/components":"5.1.0-beta.0","@storybook/theming":"5.1.0-beta.0","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"564b11785e8a1951b04555be952cfb149fef1d10","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-beta.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-/owwI8ygCXcxETzSlsCeH3xEBnffpZiN6ZW3MOoiimLBdbENMq+YfwH5cpubKvF3Bw2rIKfj1x0hJuBTYJfNyA==","shasum":"5979c43a2dc609ab1826ae3775e3bc3e752bb469","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-beta.0.tgz","fileCount":110,"unpackedSize":895335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1TtxCRA9TVsSAnZWagAA2f4P/ifXbBfqWHyc00SPgRK6\nXB9As+LS5OONpCFl/n0Ioe5b98EQ7P4xLpFY/cAZwDND1uO+qiHk1cpyME9/\noKp8odTQAHoliIJfvsxb0D7bEtpf3Ob4igNSRjFnt10tZxz38sowp9YKQaBO\noIF8CiqjMcdb10HUtgtcZkg8XaaOLhpTJcLQ+8RmtTqnyoWiYJHi9Y6Sp5gh\nnDoK9Sifwqeg4mTFD4Sqfb/DQOaDXc1zH4lPvNN/XpjTHRtEFoQBe0Hi3J72\n7OBgCCXRtEXLT36+NS34FoPioD0FUPZQGrPKIRlr4hXHZcEshFZpbopPpVDw\nfzBbvnM8o9VnWJNoBZ6RERUlHlivNdrOSv2A/aSw8hlh4h2UWceGXIC1s6Tv\nQzom6YckF7YRX3Dxm1Gv7Qy2iDXqm6mYtjERCqyeduPh5eKlcI+pRH1RKcz/\nnuI6Zow3zJC26Tjr0WpRJNvWm17j6QhSdenIsE5i5VMfzN+rYWttby7lzhdx\nFIGl3/lp4Gil+Cjj6yzbFymHhuil1RpsV2qE/c5JZ4fql4r/koAU8x+FaCTf\nlxft2KUlOVzLnDDj/YL6KfFil/w7+sNbQb2J9zp9whxFZSu4TlwXDvjC7fZg\nNx22NZ/X8An4Iozk0jNOw53xoaiOQq4yDDOWIcfDnG9JRihgM4SU4WONq+e5\nbXrl\r\n=4Ty2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF02l9TxrtSqVisUJlh8UisxOi/xoN49pT3l1y2gUAekAiEA9SOHi9+GvHRoM+NzLcjEb4+4g8uHVOmWeZ3FZkqHB1U="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-beta.0_1557478256406_0.4577868232390949"},"_hasShrinkwrap":false},"5.2.0-alpha.4":{"name":"@storybook/addon-info","version":"5.2.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.4","@storybook/client-logger":"5.2.0-alpha.4","@storybook/components":"5.2.0-alpha.4","@storybook/theming":"5.2.0-alpha.4","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b248902dad664229659f6807b8a5ff9dd85909f5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-kqu+U0wGBwGAQkGdbRI5Q7Om77icNd8KN9xLymhhdTuE0PilfYh+p7It1ZLbU7VdKkOX/KzjwSXUePg1/vHglA==","shasum":"2bf4a6b04f7d6bb46278627624c2fd658d389208","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.4.tgz","fileCount":110,"unpackedSize":895340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1mqXCRA9TVsSAnZWagAAIEsP/jCyDrAaBbCBMlujMmjz\nXpeYZlJFTeNTDi9Emrn3I1/DEhE+83tk42UB4/gHtsabYJ76nw6qbIgr+IJ7\nWwyicRJ6RKnorsmfttRSkz5fZQ8KYijU/vHJ0bGA5UGEDHX3kjkJp0Wpyppd\n4OcQw0+6onrSARkF7iuTUCX7UnltSZ2NPUukGWNvhy4haNndrw5HjcdUq23L\ne/SVdwXcDp5MryVklfhcbgX7zePlJynEcQXTZp3A1OIoUL8m7iknggDRtL56\ndwca0Vq7j66sfFasKRnj1NnKQeyF1cjFrghIir+TC6t+48aX6LOj+sqo3K30\nGETgqhbbQUBrYjxyDd4yZz66VkOcOzXv+TsyQeqppS+PYJVRHPkLRolkNl8e\nX6I3lCaCVkPfSLOcFNqf0hTgJiZRpL2TBUa+p0/9O7ZYIddkFOPj2A8ixXeC\nrL8GU/3kM9H4y0oUFluEgZ+MX7C+Iu4+yu5KV9AVqSE45ossAZzFy1ernfxd\nWIsLRgQkVfAndfV2VitTcccisLlxSGsAt8Tn/iFxl3N2BB5uibproGChUIEQ\nsyE/dYbSspMZvBKUb6/cBwDeNBvxDVstH+P1v5KsxdIG3boeH3Kq9zMfyY1I\nuRbAwnxDOKymRzyEqllVoARLpahDypvxWlPWffjNS0Fa060ayVr6sZlnxL0+\nQXYq\r\n=C3pe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT6pkQHbx7fj1X0ylL/J+wGEU60rM80/6NtfFNg8EzuAiBMb+K44EUUhc9c39Q8vmdw28xCUrqXzC35qHDgwCXeLg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.4_1557555862638_0.7951658714648733"},"_hasShrinkwrap":false},"5.2.0-alpha.5":{"name":"@storybook/addon-info","version":"5.2.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.5","@storybook/client-logger":"5.2.0-alpha.5","@storybook/components":"5.2.0-alpha.5","@storybook/theming":"5.2.0-alpha.5","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ccd05c1e412ecf818d9fcec689a2744f6d8631fb","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.5","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ZtrbiasT+wo/8hYo0gmJJTyoXRC4RFl8k/eXf88ABgGVu8ALzwhXNQmH0kvHUPcU/IY/KkQz1vxeFQfB5lsqpw==","shasum":"de49af6f0e70f170e7581806613f1588f7cfefb8","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.5.tgz","fileCount":110,"unpackedSize":895340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1+JfCRA9TVsSAnZWagAAWoIP/2l3o9BmjmJjS1DCptYU\nk1PA1UQ5hV0hWzai+WjhfjN3Q6qremt22rX5RPT0fYgNDnt+16BzTe9AzEsJ\nCLvZoUr7xaRbxePSLtyLMVkEelXWk5CpV90GQOsSz42lOvcsu8B1OCYOhflo\nJjs9mAOgGXPI8vQa3wv+8hX/Csv4iHHpZgh/9Wk56fe6C8nW5iWh1SxhVkmO\nA05D66ezm9p8eYbWgEbwCgZCL9w9mOW9uij/5AiUEhRLaH0BBBZxfs1W0L44\nWrm7UHZgPtohF5VpQi6zIMKhWWSRJP83kvL7XzCBmhKUS3h4csSalEQk8Fb5\na07l7ZbVQCpFe/SldC/0fwmMv7m9BkRL9V6EKLX3RlFBRQh9RSo1IJnZkFoW\nBjhvoHlMkNIbu/PuaMq5lW5UalZ6MNw56b6c5et1MZITZ8F1KYlmWV06wgPl\n/hGi5UbBA1ataouDaazFKEPNnUg9NUJmVctzghQjfZSFiMHC8NTT8ooP4761\nzbpt3/3QIlCohW3ejGlbeYbe69c2aF7IA0NR3s4/DFWdoexZt3tlBFVqg6pk\ncyMQG5yL7OGD9gDmQx2VVpiGMbh/TlOPRHNXHCvRaWVF9zMWr5SbpuSgE7uc\nKR61WHPMWvROVT1vBlIyCHZ7eUUJc+uwoGEnu528baMm1mmQ/HKQylL7lFEx\nVAJe\r\n=a66f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4Fgjp3fQZRUJqe/cFa0utcNe0N9XeCHUSqxf7Lj/IogIhAMrWepJXewnViLv3vdC9AkX7toPg2IPkXgLQ+0pr4IMm"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.5_1557652062925_0.8844125207516489"},"_hasShrinkwrap":false},"5.2.0-alpha.6":{"name":"@storybook/addon-info","version":"5.2.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.6","@storybook/client-logger":"5.2.0-alpha.6","@storybook/components":"5.2.0-alpha.6","@storybook/theming":"5.2.0-alpha.6","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c5f2a840108efe29c836272c8d1ce7d1510f8217","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.6","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-AfuwEyi5cO+nshar25+4OY/eop6QxktvuWf6tw3puxcq9ESjv8H27C/+bgph2kmW/rG7751Ewpof00R8UzWwaQ==","shasum":"8a8cb1e7116d8604e757213519f0e9397e6142c1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.6.tgz","fileCount":110,"unpackedSize":895340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2viBCRA9TVsSAnZWagAAVOsP/2MOEXqtoMEZVL3841Rt\nmM9wurtk8vSR8JwqZnJcRRkDObplHGlaXx4T0o8Z9S+OMHYip28weCsjDtL3\nSYBEJRtV906BF7ts9DqmzmeaHG624ddjcHVglXDcehU9FpCwz4/CLTM6zfpK\nvLF3TVZq8SYb7WEssHdDh7JBYglcJKFvA9M7q3/pMuHg1Qk1GVA6pbc7Lbnp\nz6MzRPWEJDZBCP9T4Ih1PJJpuOGqKAbSOioEzebVRf9gACCb5IxFig1DBOmR\nwDtINFPp1kngV/CYLe11CgiAuRaDvNsxV8cXyAlxtppGiACtnEWmZ28eH61K\ngaPVquMKCdbQPVReISsFMEnnxljkR8VlBMa0kTh0Hg3T6LmVfTb1HPznD3AM\n17FLtwkOmoDr+t1FLGmt+A6FJi2fN7ZRHbrqF9oM/g17Hur7rcfaxZzuX9qm\no8vfVaH+A15de3Ef2O80d/qqaPdisfNUIqPoQl0vSq7SsCNwnKJVUS+AniNy\nrlnt0KoYXw7Inm3ajG+w1feSGMPEHvaExRYnjnNjx69QZf3AqXZCb7xyPK+F\nkyKHGK/MLrXZc2PfzmqF4mxoABJuME/xdOeKFWpsKrShOXvbRE3TKnNuQFv9\nolrjqIsfibE4e6xXnkfQGXc/uHzslKSSl/D7aFLHuqB34DT/4/s44HN9a5d3\nwuCQ\r\n=E9tX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfQyueDgpCIR/hTt6lEgoV6hmGxa7ZOvwBJ2sJs7hHkAiBQ6JYcSvjp1dvzcmHbBD8O+EpuYmLUfWauRENHAKzI0w=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.6_1557854336654_0.010954651915177749"},"_hasShrinkwrap":false},"5.2.0-alpha.7":{"name":"@storybook/addon-info","version":"5.2.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.7","@storybook/client-logger":"5.2.0-alpha.7","@storybook/components":"5.2.0-alpha.7","@storybook/theming":"5.2.0-alpha.7","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b86440a111b2a9ba9037c4914f391ba28eb88a13","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.7","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-8khUmF+62LekZTrrbNACpgBomJgQjU/ccdDOf7u6chnCxiHdbouvVrkHh/ULAqFHKmlLPYHCNbtqj80QIOZxfg==","shasum":"50d71fecba7081978415e8b96f01976c36121ccb","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.7.tgz","fileCount":110,"unpackedSize":895340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc298RCRA9TVsSAnZWagAA6lkQAIhwCWhiOwBhFkbCx5dn\nu7JGp/LwyAehMt31+4J8KnC0uD5x8/Kz+Ku+Kft9ejf1yTF/zHlV3rb6/zD6\nQI6QivpelaVQI2CKqEbv2jCzaPi+iPhVq7p64qeHjVMGpFAt7UpvblspLnEp\nFFRhudLS5IqCeyu5OaTL+A49P6wiRlHPoZwky7XwdKbivIAI1MX71RlkMs4o\n1JtT8nK7ftKAkvuNWMKcVFFtJ8VXxv/jQA5Ryk24n6ZkmJQih4Ap79j0Tl7E\nTRu6hxH4chmI4Z8mq8vQYy/ca7HH2VcfZ1ilX1LughUIHWLc5F6IymQjBnUv\nALCoUObnP7Opqa03nMNfThm8MH/wSf46+v/ZsMcUKWk/BhnVOJmtXOR7KJM2\n+x6B/HIuwOfjNZKPH4oDTkgl2cHjVfOfb80cAIPTBk57mu+pMeANGh6QWCIx\nkBVQEZ/sgGRsI3kh/0+aM1JqmZV7VQo0d134fXmKD0FRwJTeM2fqr4OVE+ws\nQ68+bBJ4Z2W4gQMruJoo2JIqznEkrj/d4geJbl14AVrEnYmcpudo5+hPrgzC\nihvCzqfZHxX5jYjAWE1XdEhWjt1AHLRAGZOKyLLcAaFSF59wLfnpEB4OlfJ9\naH0yzb95LgncKrCUxU5uPy8L9PLA15lWPkbgnG7RPirUzy/+KuFSniiwEiJD\ncMfd\r\n=ypSf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5BA1gb/n9U0uVH7kaQYN30QjoSUAklbrQDjsmFtEi+wIhAPGcN+8fhJXQuLyaGCRo/zU6gMlMXKsSvhPowlpULizR"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.7_1557913360346_0.3437632292357611"},"_hasShrinkwrap":false},"5.2.0-alpha.8":{"name":"@storybook/addon-info","version":"5.2.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.8","@storybook/client-logger":"5.2.0-alpha.8","@storybook/components":"5.2.0-alpha.8","@storybook/theming":"5.2.0-alpha.8","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a76cf4c88d787cdd20847c8433d80c4bbea14f1f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.8","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-obZzW1sC3dVbUqhCUq7FiwzobmEws0Yswio9lO3zXELb155AROlv/a4NJHXcJMpHPTafrjZxSMhUbgvQ9LwyfQ==","shasum":"b15774120c522fc666658eb9b534d4f80e57b5ad","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.8.tgz","fileCount":110,"unpackedSize":895340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3Bs5CRA9TVsSAnZWagAAS0AP/2TQKrmIL3/Fz94CJR+O\n08kz1pJOvmDwvZzH9fkSE7IFJAeGkfhfWGkcbu+EtuONxaXYPNuCILGhcXD8\nJcdBjHWCYhUP3i0POwuIf7mBooCuuzLwTA+iZxWAxyu+ePUj6d0D+Bh24/vL\nWXisJwvkTmD085K7iizHnFBr/qdMEHvvPffjrjZqRWnJ2ghBbDpLCRXymt4N\ndGLO0PvZiaT2Ifj8gqxN/q8jAU9jqAoRd8ZQuDBB2VaBMBtsUcB+9ozpr97+\niI9NKUk7xpofREgz5hew6GYcksc678cHdkn/pabEndHwxokJaNQnrRUddYPz\ndF9zS95pqMq43A7GQ2kwzR/b4dd9vh/fdVZsy/SMevC11uFqKCD+g01NC33l\n/4hZmPR8BOj9VEK6myW5cI/C6EudvkHcWJ/I96gF9aKrewFR6/k3ldFsRoJv\nxvQgcKUj9cXmVDmFLUVAxPcAawrMgeV5OnrMvqsoXKhrko89Gy13hNz/ET95\ndXsN99KsNQ9rJIBd5GXI4pFMXSa1gtQwV/NbimCy15jsNyGYdzPfKM/nF8cN\nenm5tVDInkN2Du0Qcs1oe0VB8+q+xejRm6FDaRhKEXuR7rTpiMSfVcm1HLa7\nenG6efbhdtWBXF7pHM5us+ELyr6oAnc9Kyf7GVcJBHMDFkpCJ/bREhtBywOI\niVKo\r\n=1ck2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+Q7V1HXFp5vicdrxLKevVTEoZlTl8WpKa3yXsFFoxKQIgcjkpfxoY/zea0wxj4eBkJbOPebFt4IrjyL01KsShido="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.8_1557928760851_0.451966438868572"},"_hasShrinkwrap":false},"5.1.0-beta.1":{"name":"@storybook/addon-info","version":"5.1.0-beta.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-beta.1","@storybook/client-logger":"5.1.0-beta.1","@storybook/components":"5.1.0-beta.1","@storybook/theming":"5.1.0-beta.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e14539f7127f8dd8e4b9f10aa7d95fdecd86de2c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-beta.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-ff2gthuojuHG2AXs/opxBJ+TycDz469M3veT+3FsLcC1CpaV3PmEOD1D7Tb2Nd/QfRq8LJcDw62kdT4rf80uug==","shasum":"9e5546a68384640110ee0e94452ea9a2b444f40a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-beta.1.tgz","fileCount":110,"unpackedSize":895335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3Pz6CRA9TVsSAnZWagAAaiMP/2QZcAHgFKpACjEkHTSt\nBJPRlt3ef10t+UiWFGshd36o2tMoGP3t2dkoXL9U4D/j4vg/tPtTkpskSTEK\nPkJlLjtk2OC/kvVhwZkvkhzEuqQqHZ+FNmRCLNyY9ssBPfvOBG+z+cgJT2Kj\nO+wx5/KP5GiNOAFy07Oci59yn4ovL+OHvkgsuba94RkFg1RCWikWyIUO5qKX\nA0pMZDgClDwegD1VVYTNB/nIhbj2PKPbYbi44bHdcRwDBdGPMkgeWCjAL7A7\nQ8wOh8XTL6sVKwtMFcP13mMF4vE0RonBEFYQupwkbfIYdW/4kh/bAK3D093i\n3dW3fEvhBrrUD+elrqufQs1PPV+QtZXeTubu5NQaGjwPotrWHJQ0oTKlo75j\nSIKIOFwRGS7NWXG3QAJQbRckWk/4s6W8BH0fQhIaFgqg+9w8H60uvQH+6oXa\n/257Ygy1pjuDgi5tLf1y5yMqw3ukUEVctPS4EVWEmq3YNgwrWwLzdiCQGawu\nmXHFDyak72ANO9oTpl9+0K4+udwpyC3KjFPg7SHPFZh5yRwI929PFIgSPKbl\nXEGIoaPmjlIN/CgoCipopOvM5mFkG3DdyzLStRgRDrcVkfhWmcgnuS5ZEk9o\nSMWmndm7aaPm7XrPKg6TVCjCT1Ro6nehzyi3HnuIypj+Fe8gItULpJWvz5JS\nYfYZ\r\n=ljL6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDuqxzGTcDFvlIVcRbBrXpwJXHvUHp2wThM9NPgiifOAiAPpdfOqD+a9kelIiNLxm7wcM2IvCI0PH1LdToDW1TrPw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-beta.1_1557986553268_0.6260380282563998"},"_hasShrinkwrap":false},"5.2.0-alpha.9":{"name":"@storybook/addon-info","version":"5.2.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.9","@storybook/client-logger":"5.2.0-alpha.9","@storybook/components":"5.2.0-alpha.9","@storybook/theming":"5.2.0-alpha.9","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aff1704ec9f9cc3be3093a835b367542132ac2c2","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.9","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-V61AEKCnW6uDjrs2g9v+YgsizxJaZpCsazJIfcHyZVfz5kpAVSQ2hpqW1T9s5iwuvL4ufUa8n097tV1Rem6Q9Q==","shasum":"a859d372fddf7c48ee4ec78f2926a3f286cd28b1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.9.tgz","fileCount":110,"unpackedSize":895340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3nsvCRA9TVsSAnZWagAAiwwP/2Wtn56CvEY3BkX2niLn\nNacYK8gP9gO864v5Us4MF6mF+rAgXgf+vKQvWDwAmSmVy7aMyP6CoNuHDxVE\nYKPSpEXPv1VCkzvReN0swMlWCyILIQu0O60yUU762+tccgidh0Wb2ksxEq2S\ndb2IEarAqqDXT4Zukh6nGclYSapYNoAvrTkgNdT31artvljmY4ojS5624TSM\nx+wjVXM5C/X+2Fq2Ww+dpTcaZwUHF+ttiwebJbAlTxv0NK5Mqi7X7Q77FvmE\nv3GFfzRxIwvAv0Dtv60xv2qCw9dO6NnTSEYY4uqMBy1e7izNNmD3ZRhkLmtI\nf8PhWuDRwC47JFJ1jUQqgdUL26FL5bH5NRIBVD93oRXMo/ytoVknxqZvcYis\nFNf7/mocFl5TdGdLeQUtP/4ky8fLvi2Bs+PnscYY7Vd1OVHMX3nvMKXdRQOV\nOEqE7Oe5HmAYY8nznte8raBAsdJvKhyaA+YI28CsSN4l6Wz9Ll0UUMT0d05+\nWFiHYMtBhJyEvkxCUO7sBsc9h2WO8a3qznPTauaoAW1qEn1Kl+FvudOsX1zT\nDqFKSUoQ9bPpMKrJcuQv+dfdfTCZ76rnsNxVZPR/qhVwPdlNLbg3ui+XLgFa\ndgr/5Dgxw7XoSH8Ie0U9PvF6nlCOyw53HS9jr/RrxFjcaLn8N27vytvxlJp4\nNSXC\r\n=XXDo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYqCv6TRl6b9Vr5Fk3af/mxgmlf0Jn8EnOoIz2Bqe9WQIhAMC4UNn2hAkW8bPSe+qSbfBkmPlirn8QkgQ3Oa47wP6B"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.9_1558084398701_0.7545113335206761"},"_hasShrinkwrap":false},"5.2.0-alpha.10":{"name":"@storybook/addon-info","version":"5.2.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.10","@storybook/client-logger":"5.2.0-alpha.10","@storybook/components":"5.2.0-alpha.10","@storybook/theming":"5.2.0-alpha.10","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"baf523d63481300143d255ce4211092f90ee4190","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.10","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-KxbADKC5fYywxc7dA3+G0SFhrgohf9dRz17X0J1aGv32KAkHMA0AoUgkZD+nsEsJU6JFyqd0hmDYAdoYvOB4dw==","shasum":"d41a8805a4deed1ba2ccedc3290bdd3ee60d74bf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.10.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4lwFCRA9TVsSAnZWagAAvSMP/0/fnwym7qEbMhaGsfHb\nEoHtUCeZrGsN1frh63rLYtmAneJx7YVI/yy4wTl5ynF0JmqqTSONgR32Nfrm\n/UXmJLIcl7SUBVW+29DlJDljuU1Hq7V3CcW8k5nG3p5W9srD0/tLtgjCLXV0\nmQNQ7HXLV2r8VgEKJIqDf+Q/bSxZyejFrGHAVIq5WfA/N0WtBeCxTU4hUJYu\nCDO0wXn1N+mvH4rsVlmsxrM115ymunYe3FOF8bK20QhJowi1WcI9gHoaZnGK\n79enF3PkhcQ01m0ZQxxKXEJ/XxyzO2ORYRNmjNlfElcaUkrp7Nlt17+fcTVB\nCvm5Gk2jRJqGfy0zvV8ih2VO9IjMt/xe22laOhB3+PX1FMJ+VseAdCnZWgdt\n5Mb9IYPsgO11EfPOlgtXRw9qx54Atp06EZLbY5Kn75Pl1nk1rvqPQG1Ieupa\nQxflzPP9jsuQ11NwvetOX0ovM18IdAufAsD3CDA92Ndkj2oKWrPYSUF7z57M\n9oWQtUYg8pgLSlMFXY3j+Ow8GNfFTl4IQ+5gre0KlqxWmjGNSC5/jIqhRgT4\nrhTUSNoza27e88Rowm3blFql0EpnxNrNY01VGzehbkVzA5Kg6YSdpgtIV9vU\ngediqDyGgDCk75J21fchKxczHnJDbeC1B/6MSkMo6ssf0mTJw3mKaUjWWBpm\nn2Eu\r\n=smzH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBO6FLWWkS/fx8dxprJSXFPTzW7SYpknrAoh0DG7uHwsAiBLsjvYMaPKT7fP5dW0MxfM/fBXkRF2ArvSl25TdgHM3Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.10_1558338564535_0.8751392255647961"},"_hasShrinkwrap":false},"5.1.0-rc.0":{"name":"@storybook/addon-info","version":"5.1.0-rc.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-rc.0","@storybook/client-logger":"5.1.0-rc.0","@storybook/components":"5.1.0-rc.0","@storybook/theming":"5.1.0-rc.0","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"35ec834e893384fe1cfcd1fa008af619de2e9162","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-rc.0","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-wSDBtgJDacn7/KzIyc2gYikxdcfPEHYv2d9sy7vYtzRkZgLifukmEj5DWpQXVXvidyhfiBlKMWaqB8uahICo/g==","shasum":"015faf1a14915b21643230026cdcde7ebde0ec3c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-rc.0.tgz","fileCount":110,"unpackedSize":895325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc490rCRA9TVsSAnZWagAANNwQAJL9PffHhdMQNAfw56Md\n8FxUjqAkaMEDcB22N4c60pjn75dVhaj0hGbegue/trtQ+Ysg0703bHz8/2On\nWEZC0KSkOiKmp7sYLXfrqnqa7HJqm81Up8dDnzgc4hmgQcVyDT8S0Cm6qqET\nUzE7+MAoA3GAYriCLAN9JddF2citFv0WOvcXR4BZ51t2CN7cixb+IgEM8yle\nbnC8e1k8lQL8DHvkCdu8FZk9hJPQzT2JSwgzSBiR4kwmicquHgiCsIm7BqdV\n/JwhDd7585HWbdHUNrjL5YvYUMz/djH0r8hmKejH3fkL1CXIbmWo1r2NbMU4\nVV5qWrgbduvsSb1GOtmvWbv2NdvQ7FBwCrXRIIM/V+d+f4rZ3eVMYEr9e/PW\nTYKNAE6MvqGEcIpY2wjshb42U/Vk/ZYx3TbqfV3BXbsbCSLipT6O2mGm+WLE\nmn1317TBwgLxjZKvurRKltZY4R7hUy3dQ0GMSAyofwdE/Om12Kvshx94Sd0r\nPxW4El09MYCe2BjyZG3+AMwfWe5TzwjX+zCSAPHtlcGuKX9LV8nkXHmaJ0G2\nr52h/7EMeL9LNZR3H7jQuUDYisPvEsV7YfenMRCyxwOxUt2TtT6128cgsvJN\n48Hi7V+43DKePDZ6RtZ+JJgU/CtUu2dbS6WTeQWQDzXZkMdxz55eJIYw4cKK\nuY/i\r\n=GcBX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChuRn7XC8vXIW07fPO11QiQv/G0KbRIivZrSCgcgIr1AIgQrW7kHqrY9BGHrxQhZf4VjTUYr3Oab2vuiO6xT9kTH8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-rc.0_1558437162609_0.7565061969608999"},"_hasShrinkwrap":false},"5.2.0-alpha.11":{"name":"@storybook/addon-info","version":"5.2.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.11","@storybook/client-logger":"5.2.0-alpha.11","@storybook/components":"5.2.0-alpha.11","@storybook/theming":"5.2.0-alpha.11","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b8c79460a0acd2aa1ea4e8c254d3c5e0376323ae","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.11","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-R0mUJv5/nLlhUBWH0Ws181m2yUiSIlzyQT8OgGX+HlHua9MQppy5fhFpbar+GgmUmJevidiQjlwP67yqOjbTkQ==","shasum":"62b370e0b2072d516cb519e5aae8461c4a72bb89","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.11.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5AQsCRA9TVsSAnZWagAAbugP/3MZ1np2cDE//QDM0mmH\n1sYpNz2xnoY2WJoqgSR/pxJzQvIwhezH8/B9AmvreekJ1WIfKttUZsP+aqhz\nip4NO30c/Pq51gxA33QL4m/I1IsNFc4QJZUaiPwBs70A3iAa8eGpiOewXueL\n2pGmDXhj2ryJcZKJN9Fz/wI0VVzUXXSCXUkTKQ8ouUUpC0C4ynNrZn+w7UHc\neV7SkV55zlUUKDYXGau2YuEVURJGhYAxACCbqJV8b2y+9ljZ6bjVI2g8Rn9b\nxuJRRe2otZKNYAh+YODfiK6QwnpAmU6IjfWXJS4x+RhroxRG2L77huNyFZ6g\nBpI0BgjhVzhCv+TFA1zaHjyEGhQdDrB5la4vnreWo9mr6SX1dFnoaQgl67Sa\nbz4GaqkmYoDlm5jFy++uiNuLn7xy5ixfH6yt5cxSndIAOaM0HzOn7vjFMGM8\neJoIJ8ODYoCqmuVKE0VfDh7nf42e+zhy4pJIRd6z+2OtWeyHQVWuA3WORhBt\noE2hiGlSSg5lTCeWbZ2gcnG0ypYF78jTY2p8kr1Tfm5y7IeD2nDTFolkY7kY\nBkG7DdMTJzB2OA8p9LYHj3DgIvinXXepMBZpq21c/tlcISBDpjaU2pN/78ly\nZAdwqBJAHkjWYtLbLIzz7lltNTxCGJsxVNG4cv9IpGnSG3Aa15OgL2MC8t5d\n5qT8\r\n=qgC8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+fOZAxaRash4j8rjXahPhIF73hL+OVl65mBxZMPYIkQIgZ1b7pKq9xZLFiS8aTLWkCJ3/7YtyPY2fCPjAVWNzdEo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.11_1558447147476_0.4717821552855517"},"_hasShrinkwrap":false},"5.2.0-alpha.12":{"name":"@storybook/addon-info","version":"5.2.0-alpha.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.12","@storybook/client-logger":"5.2.0-alpha.12","@storybook/components":"5.2.0-alpha.12","@storybook/theming":"5.2.0-alpha.12","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"46e83a902787a15a586cb495aa7f090241b40607","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.12","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-B+ZSIXOSLjt45oalgVcAnwJquirGFd1MQNtAj1DWpB1dT4l3BisTCf1d5pY/XErO0jvpe1iMqRwqyCpRPQqTgg==","shasum":"e89b60169ee7b14c82489ccecef91e2d1e054c18","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.12.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5B8BCRA9TVsSAnZWagAAxCQP/2YGrKPJl1M23/xDVhlN\nj1PQWeJZdiUOGY5alJahiI9g0EalXeNrx587USJVDYxyYjuRH1s2OtRXn5x7\n+E9XtczlyUHMqCO+x9VhsQLCS1kdmNt6UdpFsVQUNpuBPtix1wu7V08yluB6\naYnDDOTk8DILVhOTepz+bPc4W8Z9IdEE/+p2E5bV/o9Ra1vKLBRjrR8cC9fx\nJ5PMCHO/J8tGffaKBJz1bOsonBDeA4yPCtYtGl6DKvIEPP3yVfRmhHagNJOM\n7TwEIX3n7Y30nBlZ8BqlSzDLP9RjmR82zGMGzy0Qd+d84q2vLAP1XTMxCK9h\n0lACPev8WpNfyNB/DCgTaE+OP0e2OVuImjVe8IelLb50W8MwIcHvmjPRJ3i7\n11pWN1aN4LwsTLx+XNfcE4S7azB5gM74FEbt5ekJc65Na85FpTez00RhoCjH\n61d7Whyk8OO6aFYXTEEQFLcCb/3miaOzDObAigu3vV3cYYu3X34dS0W5+W8u\nP6olGfwsJ3euK7RpIqOyxA1Fin4cf1W+Fduz/S34DnDJaCILFMkJm6rZSwFR\nYp+G7xJuzo4uzrI6UnX018a0pYU3c4doBQ+ud3D4D2xmW+vmpr9KCR+kwqif\nkxJcBNlupiF2geLhZt1SzyXxClrABVuSX0zYReJGgoeX2Fm/mY1feXTJNC2X\ny79n\r\n=HRFV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVVJERiKkfCxY8ZtGdZRS/18CMORQZkhWREyeel6vzyAIhAKEsofki1T9sVXYvDWG1QSvR5b9epTiqLTWkCLl0+OQO"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.12_1558454016350_0.5082299185707149"},"_hasShrinkwrap":false},"5.2.0-alpha.13":{"name":"@storybook/addon-info","version":"5.2.0-alpha.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.13","@storybook/client-logger":"5.2.0-alpha.13","@storybook/components":"5.2.0-alpha.13","@storybook/theming":"5.2.0-alpha.13","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"66371e3f68686434bf0683daa6e21f9cfbad7e2a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.13","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-wMgpBbitLj09sBQoq4j2fl5rl3elOJ5kpmcyxPTI1A6EFWav4Wqm4NJZjTkAHwFfLIrCMqHNQgtwAtWhX+3FdA==","shasum":"ac4fd73e6acc2d482790386ccefbe86ac41e6a85","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.13.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6Ik+CRA9TVsSAnZWagAA8JgP/jzSS0ZZfJhr3SCNFGVn\nz+FC6K8rNWDFDX0aCz+gkZs4ibB5LWslKCxcE8LrPfK095UDFi56ACBmq+k7\nz54QK28zjXEKz8j8K3J6zhdDcREtjFx2WWxVyxSWy5VQ86a84pHkCNXn/K2D\nFMLfjSZhjJzHgzuJqNENsNLofo/Fx0bRSJ/vpGDK/r3EN5f3K1yxnfmDstoR\n9kfg0K8IQtUFLIG4cxQXMWgib2lOBcc29WBTo7nJ06o7Hpu3fNjovzVVrbLb\n1MxJau/gOy4R38FU791OV59rZ/SF3UuW6OC3kwkLNS7Ld7gxmQTGxeDDbaKS\ne2g+Wt66o+UwF641lfP5F+521e4vnodm7pYrfJhNoOYBhwYL0H22AOuav0Si\n3DjHFB8coRzFSP6Bw6DWT9UWptOemPOl9hxmbBk1aLGKzd12xYlQrrniZppt\nN+RY2xo1gjOYZo4PerabvYTpHBbHSA8qQy1022AinoFCTOEz/kkKw0HOiRf6\ncHsaEFBLUgY88GAGS7tCw9L6I1ah2ZC3OQySz9vkYPAIomCjeyBxg9+4SO/X\ndGNZqfQqQ22MeEWUFrIl2IJ80yIWVsB5NpWiKDTboinwG7gRq1iXHHUqLkcW\nPanqUN6pwLxyV5b2sHzTWCwwrNh/WgVrAvIH/CDSQp16bgisTaj30zOt7EyX\nmr8w\r\n=P6H3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZhwPFfXN9lK8kPpoeP2edXJUJnfAp5HLXF2LT0FJUGAiEAkiJmG3QHigP06WRAf5fxkEetmkJxZ2Wghskg0qUuJ2c="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.13_1558743358033_0.6932388852337814"},"_hasShrinkwrap":false},"5.1.0-rc.1":{"name":"@storybook/addon-info","version":"5.1.0-rc.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-rc.1","@storybook/client-logger":"5.1.0-rc.1","@storybook/components":"5.1.0-rc.1","@storybook/theming":"5.1.0-rc.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aa5c2245346e74a12e331fefcf5a358466773d28","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-rc.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-mtUtYL1FdvyLr0V6QKTa28A5Jo9Dk9xe2YXkJbSECDh73wB0yDWKaCet7XxjVf5g+BCVxolsBvW5Y1B9hlPuzQ==","shasum":"af1092b50c1312d9116d6592f505d274d6530206","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-rc.1.tgz","fileCount":110,"unpackedSize":895325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6JQhCRA9TVsSAnZWagAAdaYQAIj75GJXOzNbhmmM+P7o\n28eKv+6npfhump/1+zBGiaOZmP/6NxmGJHQ6dPY9s8B23Yilz6Er1XzXHye4\nlzotP9uL0foBWhb2ydXF+DbVRgWFbwkjyOhibZgJ+47Syi6z7UDtc/uT3rLb\nxOwt87B6lyPYnq19qj/9GKJNx+33idguvdVrr37+UZSndl2G9McOhkUQ9ret\nSoceSnY2r7VVvyplhuuEv+sXX2QQ6ojSyG5aX0jSCoIAMExsEvmeAMGa0mkh\n38SFdT/bgHr3cgf32ihBAkl33uISd9C/rgXBrkoDfNseGm0jefhF2yzlBY5y\n8u7Lx2bQI+NjQdXTuWykkbB2QHIyCwdK2Zg+8tfvEJMSR/CQJDj9mNLzlW/l\ne3ET/rophQmJ8j/I2uGmREeDCTiMV19qiDXZRG3YOm39ZGPHcOMh4uR50BgU\nr06o6VBh+Droew8ISFlaY5HRNrdducAxNugbcAYhmt7LlhK+k8GF3z63mLwW\ng2hT5XH+/IMHnXmyTlSKtuGN+22/DXFC6txbcmdxDgsLqZD/yfpcQG+nFhCx\n+1zeQlyoPZvTR8/G7neMo+mvCxIIZQaQ1FBhkGbRdvRCmm5itqs6Q2OcjUuO\nUL1LtHkDGi98G7GN3/avXYyd9hYlcD28zxGfzxHaYg5WRQTToP2CW4WP7Hal\nSWqX\r\n=TRIU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAPOB5I8NF0vRpB/2/ynq6Zy7nojsmIuqggLlWPIH7YAiBFgB3+CY3tZHgTKiem3xRfs4vVTH9UpR4PruwpGC6IjA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-rc.1_1558746144321_0.7187383705497321"},"_hasShrinkwrap":false},"5.2.0-alpha.14":{"name":"@storybook/addon-info","version":"5.2.0-alpha.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.14","@storybook/client-logger":"5.2.0-alpha.14","@storybook/components":"5.2.0-alpha.14","@storybook/theming":"5.2.0-alpha.14","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b4af57888aa4ea8ce0190ad5b530216523a648c6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.14","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-YAg5BIEBgqPdC1fFkaQpOgO0oowOC0vlR9ztMpMxmv581x4fI5MiGeb96yRW5PCfdQlJXITulblzyLGkAj+mCA==","shasum":"a3741cafb8d5484923a6988b93cf4a1720e029bb","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.14.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6cK6CRA9TVsSAnZWagAAma0P/2uy/RZTXHu+Qbd2mRG4\nF9AnllHMBPAxdftydXkVFBVI7JX3RCMf/HIkETNjfGs4XZUT5uFxSNi5cJVx\n/qSjTK3G2QteIne/9KsXbhI2hFRat3Qz6izDzqpQ1VT0qN5SGuxct/CUknJb\nJkZ4InXE86Mk/jn+pVXDlGPLeUgaOf+ltT+r+aES+QdSZObZIOxxGVUsjsdo\nofBL6687GdvERY7YtvgEsn3DeUYyXZzu7Es2Xa4q1gXNMRISsrU0E2iOJZQ2\nY0hGiSmuJ6af4xHRLMRG2Prooq50Z0LPhcV7YWsth2RYYb6ABCs8vJc4bM5S\nP2XRNSUkVkMbIkpRs1bUpG3hIyuYxQRZb35eVXkfOCZaDebicWZMdfRkcJp5\nuht+VuK3rT2QsCFLjxtBMhDCNG3v0VWJZR1/Q/ZRweGZW61jNIVWEPsGEl8e\nwDTysCf6l7S1N5B8H1S7H5kp4/XCLQSLqysQDxT9pnFajKOtjF3DssWACVEK\n9ybZPg/w2vhiWH4XF8D+WwHXdxEt6teBt8wWDZ/OYrfYuBqC3ReEdHlVOL2b\n4pG6mjkmfWzrTgENjB6GkX38veMyn7EzqEjf3L47MWRgNPj+S/vxIaMPWOQT\nanZ6QV+0mEAbSiOiEdYuyYYH636Nb9shwfgGJEVs0Pwxh4i/6PQHgLb35kNS\nlod0\r\n=yWH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCnlDbHStZS8jassjBPX9pzUVW2ZQDbAMZIFRitdOZKAiEAhCtZ3ezWSaV051QZVcuCCC/uj+T+5DXBzFHUSOX51po="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.14_1558823609244_0.7888175918943132"},"_hasShrinkwrap":false},"5.2.0-alpha.15":{"name":"@storybook/addon-info","version":"5.2.0-alpha.15","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.15","@storybook/client-logger":"5.2.0-alpha.15","@storybook/components":"5.2.0-alpha.15","@storybook/theming":"5.2.0-alpha.15","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"27ef09fd6de24ad2a221a12827c5afbd5851598b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.15","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-zNwXVYXwRmPdhXjnhm7kS/w8hRoLcwPE2aAL0mU2aHL1mkfcgpzBEXnFUteMKTrg/zIbBGW6TCW5RUOG0ATCNg==","shasum":"196f7c103b136303ad03fdb5e7e81a8c62096469","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.15.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6eFQCRA9TVsSAnZWagAAtEYP/AuI7PNa5/+t1vMKuGH7\naaTj8irvimeFIN4LeL/8y8PLRofZwEzJaAa/ig9D3FwiD4lK87FUsXrsrnwS\n2syCBWv9c6F8Ru2oEpBwY1dgEcafjNgu1YPQ+WyA9gTsuBTuFQl8tyLaJg4O\nBZEsEEdMi29wUe8/x2glvmFF7PCu9T4yZrTkVHTSi+VHBA/SwQu8hXNXLMj4\ngiVN16QqkVKNtqTcgMtpD2+G9sd7t8IS3ll98FgR2R22vm/5fF5U/6qNspOa\nCsNw4Fq3bCoIWit4u75oRmiBeHXDg527+j73HsuVGgNNStk4U0qeJsKD4P6E\nupkuMX6GF04r8OzX+mi6X9wbXJPNyj6uikJ/Oskf5sPrLAHbcocpVNJpAcEK\nD5iJV5bgmb7zv42i9NO9GoSB6IjfZmCVM5ERh0CVt+w6x/fjNJMqXGobxd7S\n0TiJ0yYAQVUbsJL5pmqU/Ps+hgokAGLgL/x3d2SS0vHWlNh5bRgNAg1YzcF9\nh0t8DOzeNm4z2ZA2+yeZA1M+Ihl6JQp2Yk9Z/cbz2AnVlleVKpzx0GoD3LTE\ntj0zaPI1+633c3ntWF/PAUeNhcNh9l3F7zzoV9Rty2O6YBTFrulptzIS+OO0\nx9QKIaCWWo/+q219M8FQtLuDKp2c33/hR6ddLu9DjqXG4Sxo9R4YcoX78nqI\nLY+k\r\n=bfpb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7XMgIoMDzE8d66ECHMnR7OAaCQqJz0elhHAtjETeDFAIgCwAQ4BJZayubE5+tJI8yCUxtec77UV19A3d49toR0lY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.15_1558831439556_0.3579694225095069"},"_hasShrinkwrap":false},"5.2.0-alpha.16":{"name":"@storybook/addon-info","version":"5.2.0-alpha.16","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.16","@storybook/client-logger":"5.2.0-alpha.16","@storybook/components":"5.2.0-alpha.16","@storybook/theming":"5.2.0-alpha.16","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a618ed45a45a03d9691ba6ef0c931b0b8b2ae56f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.16","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-3D/N3KxLAxAOizJ4IbWqlNZ6espPP9o86oasB0T2aV8KlCPQ8qYNYVepdOU14H4IYr/ublW8DXsEfdwD6cLNSA==","shasum":"2d25a04ef16596e70a82d47dfac3553c5951afa7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.16.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6i6aCRA9TVsSAnZWagAAvlYP/igUS/sNNaT5D8bcOU9D\nLcCjRy07kIKkCPlelN1nJwT11WF21rVoQO1UIM7UVm1Odx5LJB3dTPu53LDT\n9pGdGBkOyTZ0AmFkjVxZro3O/2sytu/ws2RoMiEHAN7gwyozOCDJjaelud5q\nG30XcTjzdYDt0mRx6rlKpFrLRss3veFv+5g3xqNp1WC+ERHl2upAjObJpTOQ\n14wioJDaEdyAUA2ovGMclklv35lvHcQSoa1Y1XYekVocpUvLSJwy3H3rpvXH\njXRF4S/KDQMpZGjVNpP02/4uSDUsJF6MdXLXYQKHT0lytVx7yaQG39+Lxn/T\nmaCWk5EriT37tr1nl82nNuke2d497aXGsVdZrLLhwbbKae/rqYUMpav2svRF\nsaoDuFqsF4CxlZVlefSxcxK/ziCrONXqPH5PmSOjgmSxLPKeDcKgQ7N5gfsO\nvlrL8UXjGyawMVWyB+nCuziJjElwVvc6J+1S5YqWdNCOUOUG0Z9pzQmNZ15i\nlIg91j6ysTKGPW78Uv6epVg+mMbg5vQgn6+dYLKb3YLO/kNSpdu+4vpVWx3r\nzi3DQ2AcVpc19ifSkStoklIIyO3iKQhTiUduoVb5e2zYurgw/gyKO+25I+c3\nKSVzMc0cmMKXwqnzPNPw0IfaGXFl3rYIkl+5QdI7H1x9U734bBEcoSBQrEC5\nrlLd\r\n=RMXe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDG5ej8YZ2viTFuX+RTPnHm2w1wZ4Wamjz7fFAzBQzahAiEAg67B+piyz7eFn90QrDY6uYtV1ZHKqU7zEQbMDUEK6ko="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.16_1558851226195_0.006532364994319417"},"_hasShrinkwrap":false},"5.2.0-alpha.17":{"name":"@storybook/addon-info","version":"5.2.0-alpha.17","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.17","@storybook/client-logger":"5.2.0-alpha.17","@storybook/components":"5.2.0-alpha.17","@storybook/theming":"5.2.0-alpha.17","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"28620c882bf877d421032d94e4ca8fe867e5d5b5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.17","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-G5Ymz1Ez4FB99X/uKkfrALZvtgfNPYqAxNVQ6D4GVbrUBlZdRnnao0LtH9CwxCYVrKXOJ3J3imNp21xUEkBHgA==","shasum":"a63209ef87280ca7d47d375215a7237082eec1b7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.17.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6sVRCRA9TVsSAnZWagAA+vcP/2IPWtMf3w58dFlaFb+L\nxniquvs4k5uVIAd/BFccKo+p89gc+nVnTB7w7iGHwdpk2OMU/vjT6+4/oWu0\nfnxBbMH5AvStNT8FE2482lC6nSiOGz1oo1aZ9AdtYzMfILXsc4yeNzKt3dRR\nrdQe/MZURWivy8nlZ4nIHk42j0fC4NeInEAsPiGP95K7Aq8npOMBD/mJ4Tgo\nEv8kZ7OGSk+GYEQjeTKhF9kazlOgfIT3uD7CLLJVE1RIXIWsqx0s/G1U1PNP\nWl6JzNR1DfCcXAkOjKEXcXMGA18T0gWcrstEgpBn2JZFKtbMK8bOdF/sb71K\njgxrctuSqL/L65nJoZzfjfb5RGGxgx7hzNdlo5FzkfRHHUawIRhMVUHNRebL\nEelTfS9ZKiHkD+htC+5Q0VFxzfawmTrNHsb671J/0tCi7zxJrGfdeeYbF1mG\nygtAmpBFUYf2KQmh3WBGyRIO8YzS4dHBc3FdfP98EfXXWGLadJ3CC57yctAO\nO/FcWokVbn7DB6yI1P83zir1COAoYMU9BlDMsIOT49Q9pVndZYrcfNq6ZdQL\ndOcMCr9Iunw+cyT5zfCT+TRomF8EjQY575HTpStZXzV2vXpZK7GUsDEtsobC\nwwlubSxU7YgOZ8uCFham39ybwdcARTmbAxEQkJlipeOoJRjBIs50sABFoct9\nyfyN\r\n=2mvr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCuOLDP4LzVIYim3f6kPFCpOmjXYZFIqIP8KVQV8OwpgIhAO1UmjXIJVx44iPRRN9DPWOGPz6YhkuRpE5byuee7twI"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.17_1558889808487_0.14342149889994626"},"_hasShrinkwrap":false},"5.2.0-alpha.18":{"name":"@storybook/addon-info","version":"5.2.0-alpha.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.18","@storybook/client-logger":"5.2.0-alpha.18","@storybook/components":"5.2.0-alpha.18","@storybook/theming":"5.2.0-alpha.18","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4b325c9ea18b29a48ef5b7384b7229958c688136","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.18","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-n/9nShxeERKpIp5m1agPYL9kfjtlhO5ZOZuHdB1pZmGOVtm3lUuoYmyXR6gmVUJOK/Pa9NrZ67Vn8Ud7Ap7q3A==","shasum":"288324f8fc6302fc359d8d5bfb34eca43f64a9be","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.18.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc63fGCRA9TVsSAnZWagAAS4cP/AmNTJA00b1gpRqWEG8X\n4iSOn1zXNwhS38jG9qvwVft5JI72mDlGOJj/h+j0fsF1uBu+Zl2kq1eIfXT3\nl3RWeATVOGjpLJ/9OtJAR9VmLw/qUUjUdiNN5B6DbEDhGh1menjAW2oTZ5zy\nxWMuTKIPWvB7DE2DpVu/semQ1rg3hy56cRyGs+vUGcO6o7Hd4iTgGLRihmq0\n/tVzZGVBDzdGDVSfuPV2Vq9xXGfrm0lakz20O7oq0otHFpDaVYsw2BoIs64j\nrRnQjRz7XE2JZAaHIEdKkda//Bzdh+Iu47aA2jULdvuXzz3ZorkgLSC3bhx8\nufxnlf/oVd6AwGnKYEZ6r8lTNYj0rZWdrrBHJOxyG83vB6JLirbymI7FZ89y\nkvpZSv06GSu5na36MN6EwYgnAuMmc2CvhQR91Dfom26bDgze46H2u44fp+xH\nbAsNRzkZtQVMsRegyISfWnFQ8ZSErbJRmhxLvSj29Lvx8Mki7vxLBmSZotM8\n6vvzD6oD+A3BHJXy51OuxmdxDt639nUPVUFPSWBuKcCBEMTaEsemReg0aNmm\nN8bh3Tm+z0VU3BKubBDWjiJbVcaxj8zhG2HdGC9twTFErvMeIXL3kJA84fqG\nH0GqELnk7A7KGSS49/3+ekI1J2d5YEt2DmHbcdPhlhvU5qDxL/MgWq2W6Xm1\nGLMu\r\n=T5/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwUDXI0J3rkFpCel4Jn7vNdmnPDbIEjMeX3v8ABsARDwIgXH3plBJ4Yui454ClkTQrwaBrRXhiTY0GAHZgKlX7AXo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.18_1558935493935_0.4528057491798263"},"_hasShrinkwrap":false},"5.1.0-rc.2":{"name":"@storybook/addon-info","version":"5.1.0-rc.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-rc.2","@storybook/client-logger":"5.1.0-rc.2","@storybook/components":"5.1.0-rc.2","@storybook/theming":"5.1.0-rc.2","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"50bd4c3a8619ffe3a0e858619ba88c9bc8ff08ba","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-rc.2","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-88OFG25HjrjCatpr5/5gpgMgPD1G67xfxsv2j7vyvEOi6cuDeJFEOZojQWrocEG4GVzk4L4vjLkd4uL7PLNw3Q==","shasum":"9403e4337d2b95be39aa7ec219397306369c2c1b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-rc.2.tgz","fileCount":110,"unpackedSize":895325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6/HnCRA9TVsSAnZWagAAWMoP/0d7ybopbwfwxH/WScql\nNQMWO5H5floch9mLFbGJZlGTXvR/f6VzGZ6ZCQwstkE7odPSrjWl1qUNbwhX\n/W0wv2AjjbhzOgL06HTV2FQtYYbxPeGC91ktzBHWjbk/mrYoMVjnTD3l9dZS\nlAyru8KEawz6TcnM51EeCJry546aDF4tuAWSS0fnlmhYGyWWiDAAeVH8MCHj\n7COP+3NjujitQBJWrL7PsWncdc3du6jxJ4b8U86vPtTjtkNLlQMp41jIrW3t\nIukIqw/t9jNYU4lryU9nPA6eBc9esG2B1yP2RIaQz6o2ZJZls1QFYKG+9/ah\n7vKiovi2VzlAjdEJnPVzz+ZmhZGmpr0b3BItXFoISZhskNtG+vEyOdRoWPby\nYgOOhK7jUhyzW7TIL36EzpG+NnVNeZOhfbK206z/yEIW1V6BGvX2rQTUBTeB\nSreOCEmIHed/hVS4A5zeCOqh/NmvGz+3hcY4Y520r+3sgydrxdrXgJfnafmc\nZNQ4GGxWjnxxe+VJdaFNETFbaTyZTGrCQmz4AEfu/xPraH5A5ovxyXHKq6h4\n5svYk+vb6kNsN0pSePgFooWjSYc2hSCVegLcpIG0LL70VVOB5W6x7SRwDO13\nKIDM4Jz0csbVfbrtQubuQX4bSiS7NkmJpVj5qg41wlpfbkpXxXqCLbPNUb7O\nkVsd\r\n=EsCL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGke46mSZr1FMsl/Hpu4pYHCwC+VyvVLUPnd+kCKmr9aAiBVhwSue68W6fqCwgL6BzdLlpyeMjofavxab9xdocnWLQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-rc.2_1558966756627_0.644220824100115"},"_hasShrinkwrap":false},"5.2.0-alpha.19":{"name":"@storybook/addon-info","version":"5.2.0-alpha.19","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.19","@storybook/client-logger":"5.2.0-alpha.19","@storybook/components":"5.2.0-alpha.19","@storybook/theming":"5.2.0-alpha.19","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f0344d69f59e1fb556d9dc39df1f476ce7c2292b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.19","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-KBBLwDpPIgaHHuLESuLJm0u5eD7tNgTgFIE2Lr63wmezFilCeu5RRaQ8DoUIOx5oyrXVvvqczH28NtHVLUQFkg==","shasum":"76f3b1db8281ed6fae051e84a1f40384c78de0bc","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.19.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7gmXCRA9TVsSAnZWagAA9vgP/0xiWtdDLu4hBbYdv3X5\nyaZIAiiw9c1cVpPXlNdGUN8UwT0KgPuX6aq9nef0P8A5qNqLW2jL61U5maCZ\nY2xuoPwcyQYl08vzCVDWYd2LQUzP9E+js6546VnpCEtUPEeWQuykojsYnXI9\nJ94D4d+rvJE7nYhDLLZM3VWuM+QQp6tpQZXvN8uQf+YhWLHDYRE0BUUlP0Kj\nU/ntgo1/GH8E1zwzuBF+crhgPG+iqdUCYcnpaxRLJXltMevVn69lqXGB0emm\nVt5KEKBigG2WamwgQOYtAX7Xdc4zxQYR9NqWbeOe/73xrWTapt1P9QRXE2/U\nw//oXwpdbPWASQ4CjYyMkP+4LagBtQ21NCRyAEKN55wc0BW+STrEejQ5woDz\nSIwwnxqVWpxAqhGYKyIhJGmvMuBN6+Ji2cGpdOE4dXZ1mI8gJYx+M3Eje7GP\nNyEFHD244279XWbWhPXoLCmmzqGXevwnXa9PBDZ3g3lWWEQ366py64t+Ygjg\n1gljfGMx2D1LlVjEq3f4z2HfxF4yapPK4SlNfreKVwbgS3gv8//kYTi2TCkz\npqJoTs1Win43SdTmxdWw64ilVcUkP8lOpKQWfj7CT/7AmnFzyNjG/haJUx21\nPdYA8wk0d/K0mFrwIqixj0/omNPjyWicZ2PXuRDxQa5wi2DBO9W6NFT+kM18\nT7m6\r\n=U+BF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqGgxD5D0cNWmC+ncMr3+fce/+HiaGcNk5cgLuXKofpAIgBw6Hs1PgQau6KUnBlMVzCi71W7a/KBkR2sBdtHMzHBE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.19_1559103894520_0.8645369013814639"},"_hasShrinkwrap":false},"5.1.0-rc.3":{"name":"@storybook/addon-info","version":"5.1.0-rc.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-rc.3","@storybook/client-logger":"5.1.0-rc.3","@storybook/components":"5.1.0-rc.3","@storybook/theming":"5.1.0-rc.3","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a589ab39871644bfe44c779e84e9a9fd8e5717cb","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-rc.3","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-NAp1BJcY+cEcHiR7/SfG4Y4CPMZI48KgLC6rrpLMUNbeiZOeijI83s5Q3SWSCffjzj9hL3Eh6IxanB1gIk4myQ==","shasum":"37902a40846d8f6f93639a4e9d216f07d83b5d18","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-rc.3.tgz","fileCount":110,"unpackedSize":895497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc73ZRCRA9TVsSAnZWagAAG20QAJ2Vapw2W8zA0VGOaEbg\n+tXpqvOWSVRBfi9KEZUxCb6PHnaguX2Mie8VZ/jKD6fOT3nqqskv04pgnDxc\nDd1/I/61oFLYkxqgpJCAFbs32D8JzC9JDzUDAATG7VdsFKP6+GZ6tYp4/M9o\nL8jsJ3do/jY84O3KzQA5ayLXX17SLtGxtNvUgL0iqgy6OiOOFuj/QWRsGflp\ngC0ZJ3goO+g19SJZ7VZ/MPK/LWzq+GWWeW6DSVSAGM5G3kJzRefK3kg38qJ7\nernoKWeDtAh0CTtpXI/HevqoBxTBBdT5/ONg4LznvKyTAHbICejnGTXZRM8B\n9kJ1qp0hTw14y5xu2tsBZI1WXLpPJrc5Utn3oEHKAxBUAEjI9mr6rV3nPiGR\n7ZLnhwX928hjBIC+tBb0D1d4NNe8eoJnDbWNHl5UO4Tf6rg54VpkYNa5+Wg+\nGaNsWuVUJ3phc2fIkBwlPebOSJ4gNcVk85tYhDaU9P+LnjrOXET+e55QCWE6\nKnw4PZLvb0/KJWeZBSCZl9pJa6hC6TCPtajXNpHllUOFeGZbpke1Xplt7oPM\npQcL0R2J09z81OkaWsSoFLeFxgwEnG+SnaqUSSntMYcaxnsS8F1gUazw9dYV\nMFZpDbdVRWkiyG0QAZt93g+vY1vOrv9vRT2aqjqHvhk/DvZxyI3is3+i4QNq\n8bHW\r\n=23Ls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6thix9iq5lYnNdGXevhhANv2rzc+OYBMyIDScB1IwIAiBy1WKzii6RzpVzcVBBd10lfQtLB8C71Od3M6D6Yeq6KA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-rc.3_1559197264814_0.368537459913002"},"_hasShrinkwrap":false},"5.2.0-alpha.20":{"name":"@storybook/addon-info","version":"5.2.0-alpha.20","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.20","@storybook/client-logger":"5.2.0-alpha.20","@storybook/components":"5.2.0-alpha.20","@storybook/theming":"5.2.0-alpha.20","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f09222ccc015223ac613892ede16c084b0d1cc97","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.20","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-qj4UnrxCQrHmDw3y7gZMa5Z25SdOwbJf8NlzU78MnQ4bjAMHyme37Qm1QJaO+vC0R2HIZGpsv3d6gVlTooaiTA==","shasum":"59411624dfa654d030fd5de7793a341ba01ea6f1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.20.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8jkBCRA9TVsSAnZWagAAI1oQAKMhephK7fhaTR8KhO9Z\neNGTWCZVIllR9spyWX7FqtHvZvh70/ZZ7U0mdU1AlEhaCXp4MWGj0Ic1CGtK\nqUZxWiJIScHEgJvFUl3uu0+ZceCC3M4ShoH/HxNfJssqG0wXhpbH9HmcDrgL\nwUmaxVl61hzm8G84Zk9zsVB7oWz1JnCUx5+rULvsolbLr46IxLgmzQyxM1rL\nCGJ8woqwbLyge4fiJC8HS7UcQCIMEIMj7Iq/0vz/4OwgsGQNGJ/sYA9xTDo3\njxCG7G8xiHlo0aIUa4je4GxVayGWnraiIc0Mmic+2/kHKT8eRlXERZ4hZB4H\nC0foC4+BEskYJDWnf/JGech0T0/Asdmonw2AkzJ7U9gH+vCwnD28jrzrPyaO\nRCvlUjqoGJ2KSeYhJPhjm0udLXNIuDPjPvEShnrfykKzMjiYDbPspF+brheZ\nJzyNgMMS3H8iSmK8iRh+fVasldPaFoXAHxfa3JHFomwfZ89RcHDGc3Tq3ap0\nlr3zlm2Lvk9WZ9BY54PCvv1mIKczT+O3wjSyuFzIeudMSY2VhwjxbVdT1+XP\ntfRKz7qv9TYimkJdABY+qrECZTtGORIEV3Yf0isrUoeOVc+zyGX7Nc9MR0bM\nW6hsoJHXKMViwFrXAln8LoYFsV1lww1b8bIEEskDKpl2//aIkC/KAgYZYF+C\nQPMU\r\n=fJov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQe2bU4BSq48woBxZiEE9fDrjaPpClajjjZzRVFkhGCAiBNBMBwGIZiDmrD0MHGUj6PJZcCeKbP3HvuaCR/4TAdRQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.20_1559378176674_0.7980142266875483"},"_hasShrinkwrap":false},"5.2.0-alpha.21":{"name":"@storybook/addon-info","version":"5.2.0-alpha.21","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.21","@storybook/client-logger":"5.2.0-alpha.21","@storybook/components":"5.2.0-alpha.21","@storybook/theming":"5.2.0-alpha.21","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3bc4c3ad1758979b1f4c832308c59457e188fef6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.21","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-w/6CsLkpTYAcsNWoU0Q9ZSb/V6JIZixvFsJ4mtrUl2hxoWTU4GJJNvflOC4tO5YFn1kQwqSxapHWA+nVj/gBMg==","shasum":"23aeb7f1988bff5b764f6a61c1017de3e92c95ce","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.21.tgz","fileCount":110,"unpackedSize":895345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9IlZCRA9TVsSAnZWagAA5ikP/RA+gwYovaFwkxH43Rur\n2MtRbhhxjsXUDy0xxkOf91wMBN0lJLgLPrPSYVz8ajsP4CcG0nEDFbsbzXtz\n3pfGW4HsdAiItHLRQhe2Hzs2v+7r2+Z26EiwAcWWlnJnqUSyfNDQMHmMDbTF\nSKZL4pS15S7gUj3ELqFGcF24hYi/d0Mxdw8rkU9NTyBicA6JLkPpmJXK9X63\nIaD1FMq+Aze6NUwxDn0ZXFwQ6bzW+bgokvyKY1n8CtCpfdWjPMEmag6u8E/2\nY/J6/gkaKaSiaUsT4C/doEPjgP+VPH5gnEqf0taAY98Uy3P4dfzN6cgCT5wO\nYi93bWW+g4g2yuF7qTm15M6Of+ZOBIf8Ws6H0waFRswhqwoPRfy16K3UDGs0\nuccF5u11G1ASnb3/vCUQNJpgQGR5lRkJP1V/Sa1PW962vLBGqLmT9XH/j9QD\n1sF6uf6+MlWulxNSjZbuVGx4n2UtBfPxFCxr7d6QW0/5C+yNEUF8VdeviRyL\n0U8YRw4WNRGmhKgK+4GNVum5GZsRVBxQfCYBKO5dXfN0I/UQhpAQjGA+TFf6\niB+utH7VeGQqhIDCTBb+I+HG0UY3ddN+0dvl3wKpT4WplNyVxTXg/DKo3HeT\nmpMBYxNxuPhgAt5/PbxTsKgWmV7qMzpzCynKVXI/i0JqYP3iYXihWiTMLFhs\nlgCS\r\n=mSgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZuRSmTQALFz6dvpXSuud4YqkesSYya9IhMmXvC2FJuAiBm47dCHoqAmCYCuJxTL28wd7IvNOvf8IlDRmXR6PiLxA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.21_1559529817017_0.5547169165392156"},"_hasShrinkwrap":false},"5.1.0-rc.4":{"name":"@storybook/addon-info","version":"5.1.0-rc.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybooks/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-rc.4","@storybook/client-logger":"5.1.0-rc.4","@storybook/components":"5.1.0-rc.4","@storybook/theming":"5.1.0-rc.4","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1317bb14faaaac1bd45a1f1e9f8dfd4a765bd74b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybooks/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-rc.4","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-WMsOugyPyHTfXwdNtcxnE28Wv3UbokXWzC9GsCLxuVoxDfdhyWf4QpQUoR85XTlWAaatdN934sm2Hst+uZ4TFQ==","shasum":"c9173e93cf690677409f4fc9f608dafa93100cb4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-rc.4.tgz","fileCount":110,"unpackedSize":895497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9MD+CRA9TVsSAnZWagAA/ToP/jPKODaxghdRPwo/ylGb\n+EgOijzKno1xe1J0r3hSadYvint/3G6pcuQwzVhHUNYaqTzPVxZmN4nO1zLv\nPg4uB+R0W3Zm1NAu/xcjb3iMzzG+XZjhjmGDpzWYNVAT9z5gI8h2Dl80QjsJ\njLRb7B88ns3A9T7bMQS2FxZLzq0f/Z8qxRzZPlkzTd/de4kPBGFyxbGXGYjh\n5yGj79oxvrcV7yTl0Rjky+db2lyb6w6/giwCHbhObEM2wYxj26RD+fs47aIs\nkFlMipqznGGUltgBTuu9OEkB+IikwlYhgYsD6n5d7JmjbkBpMA0+EcMtWd5d\nIZKl0YQL4hDp0qXjRcRoQYbqlqSa35sRTkiroN7h/IFK7/fjfZcmRH+lzsE9\nwRH2a+R71npU4+frzhGp92zcIpjE3fz77ilJmnTmXNUHOUz5kteKmh9nG2KN\n7MFaUXrhKg+iQs2nPgIupgQncbMY8mOd2RcoKpjEzT8QO+sbcP0aItEKwHue\n3gGM2Pm8Av6wPWQOm5nAV3Md72qwKJZqH7VXyYMnMfuNhF+hDaH9s7xCaXzF\njL8DBVFNMREki0ASiev0iyWHo++GCZfy2uL2o10nXKQxSZ9qLZsw3TvXRhE6\n9CqdrykkdKFgepN7JoV9apqS3G7o2IJc/JqbtZIo+8LiFkPjB/83b7+a+k7R\nmrpa\r\n=sEVO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGAIGwbjzKtaH6rFxxbKv9mgEumC2w15+fwxuOjg6zaAiAwu4m/Hf6KqntN+xUNSvB+AkHohzi8W4wt8gyiIrNnwA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-rc.4_1559544061308_0.5024903515763017"},"_hasShrinkwrap":false},"5.1.0-rc.5":{"name":"@storybook/addon-info","version":"5.1.0-rc.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.0-rc.5","@storybook/client-logger":"5.1.0-rc.5","@storybook/components":"5.1.0-rc.5","@storybook/theming":"5.1.0-rc.5","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"70d6fcdcbea52d08011d0cb8d0e842740e6cba31","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.1.0-rc.5","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-r8V8iMNVuw1DLd2FaZ36gH1677pmNs9VbaskmREjiGHzzpT0Q49wKBVXwHKA7CjWLsYE+CiLrHndtjYEhf/Ogw==","shasum":"8fc6b13ede3218d421d76651337407b5cc981772","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.0-rc.5.tgz","fileCount":110,"unpackedSize":895503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9rH5CRA9TVsSAnZWagAAaw8P/2ccYJJim/eGD/0f0aSs\niBxxcdnJJOIRaeyeLkVmvo+Jud1lUzA5Yk0PtwQCnvIOIgiHRUFSYqc7p53b\n8Zaltx36fOJK43huYYqtU6MiWLGNu8G4BcpxrxIL+Pq2EFN1BT3NmqW5A7rR\nk7CyNx+XvrJvfCHjeLAUF1cW28ukPnafTex7P90UpqLTuNhNPeWuQVQ5mQYy\nlyiU19QTgkeoadIYliBRBqEuK2STI8ZtfE22FXUdbi8R3UtbQJwG8n2klVz4\nZIK8lWT9reUsGgbc/W0+YQfgv+zuC9pSD1hHQYxZhIP0nkzZz7uqLotdz0tW\nXGUppKAjukqRnNJSSZVVlA0a6PK4aY65hFDjFlkHEk7RNOcLhBWNmj6WNKVt\nBDl+wJNyYK9ZubtmL2PePNG3UDzXtuqXuW+MYurNGhAyJAg4njw9Mjg5Vf5v\nBCKoMY4bDLX1hRz5jClPbd2gNACNB/AwnWShhtOqnebf0YWQcmCmBb+M7h0n\nLVqXtTRcnaPbkc74mcwiY67flT0K3iTSQ6RVZs/wQwYGCRrRpWzQM4MoLS/8\nY1qcX6Z4Nq82vIYYxDxqPIctFx8vGM9j4PrpkETiWAfXAkI518KlVFpE4G0h\nJ5vKJUN1LKqwxfdyDaGvhrtpLw9t9PySbTY8UHzJZSQlGiFkXx612wgZfN+e\nOYeI\r\n=MVy9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTtDLeF8TID9lG8sekcbVqclxSYNlFm1Vr57qUYWKPCwIhANH+siDAKFTuZm+hLWxg9jfM5eaba357GmB868Zkgkdo"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.0-rc.5_1559671288888_0.059946301235370036"},"_hasShrinkwrap":false},"5.1.1":{"name":"@storybook/addon-info","version":"5.1.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.1","@storybook/client-logger":"5.1.1","@storybook/components":"5.1.1","@storybook/theming":"5.1.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"43dfe3f55017d35238df63781ed53113fe5c3334","_id":"@storybook/addon-info@5.1.1","_nodeVersion":"8.11.2","_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"dist":{"integrity":"sha512-E1uEx/+Erux5I/Ym5qans0oM1Dq3zA2fPROnxAp4N8LzqNTNZ/MoNDlxK0WWdNxvlotASu6McV1OSGIXjPinkw==","shasum":"17230d82a5f3aaa3a74c35806f63ff1ce24e01fa","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.1.tgz","fileCount":110,"unpackedSize":895478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc935zCRA9TVsSAnZWagAAiasP/3LCEB3N5+JT2OXt8dJe\n1sVSgJrhaJMLntiGRcZ7DnlToYaMkeuOkIPhAylMNIjNIli/tBPMV+KqAwtn\n0Z3aM/s5M7fqEvzUofKPPyKBEJRywc0Yz2cW7tPpeu9KCPPrOdLzfrbpSDJ3\ndHjUuIfWjgxQVgGIe68Y9Us54KET6WlZ2hvs5pPE2XRipcG93kZY4rmthvRF\nDrQpMTLY3QV1fXLgrllYCUJzsJDmDDbb0YHrzz6Xr3RcOMysnqZEP8T7jm11\n7C8W3l2ymgBRkGqN/wC84yY48DCZzk0/ogozaa39b0O1gTywfG3stLqko4D4\nfIrc5pk1YbiPMldQfxoPAWVBjq90/MpzzALgUj+xU5OMQig+lVMwZ3VZ0PsY\nNBzIj5BnJ0eCuUGVxc03bVUWSzLiSQZRc0iUu6CL2ISJWefdSa9L/vsmRHaI\n4YG7lhwUnT7IjhTX3g89n19GhqmAd//OAAea8P71XxbhxAyKpZiKjAjsd4uT\nS1lWCJzlWCIWmoNZkmURnOJ0dNcbDK1/ufTEZtidl4WV058/bKSlBVqooEZU\nVl6JQ1YyQAiSPE/GSWAe7Fss0dV9KYgCLa4gqTGLMuH3caVkuB4IDM6x8tB3\n6bB3BdwKxE1BO4fp2By4qMPswVZwRbO+fxS57ZY2cK8Qbx7c8CgyRvVI6Q5K\nNJfF\r\n=0itC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2hhRDqXVx2IDdCzOEV++6C7gsl6FBuyVxomNuW+DXIgIgJI6VS5w1CV+wZEE3J979dWxPusGxShSUEwE/wcG6JkY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.1_1559723635137_0.6370768277527932"},"_hasShrinkwrap":false},"5.1.3":{"name":"@storybook/addon-info","version":"5.1.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.3","@storybook/client-logger":"5.1.3","@storybook/components":"5.1.3","@storybook/theming":"5.1.3","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"bf73c6760a15000e23776bb7973148b3a73bbe5a","_id":"@storybook/addon-info@5.1.3","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-zI4s7ADtn+qxcqM/KmiF2kkMKL32YF1b2dp+ByBjLoUJIRw4sdkCyFgmX0Y2nQNd+UPGRlM0TIedSqoGjvAFXA==","shasum":"5e979edb69f5f7ac168b80cccaa35509a1ad3b0b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.3.tgz","fileCount":110,"unpackedSize":895478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+YTZCRA9TVsSAnZWagAA0G0P/2GfQm5m8MUKOGl8GAug\nMRVdkA1GU995HdQ8wyT9NMUf/+QdhFHYNgQ+XPvIH4TpIWmp37gxvwBlvGH1\nm6q+kzZjIxDHzon6+th+F78MqMi935e0fd2XLLC2BekeIEznMJvqmjUSympl\nGWrpynoHkpZ8gR78nXnOcoAk8VmWv5hBjSJQOC2m0HFKariRoQ/AhpVi3VVm\nSau5B/bwXtFayU2G+j6EaVqMXkVzIZi9nIA2tdmapcRaMvYHmUgsKkFpqQoO\nPwjrA8V6NXM43nLMZ7zN73RSREhJ+yHYir3TKoqwFxqBiPQomor2qH/2nl5U\nQ+c6Ao3ZySgR8einrL5byJIJFQYlOQRofVy6CIjJFODa7wYJCjdBTteXxEBy\nALX7b8mTLKLWKHPVzcsh1Gbkzxj2tFn7sW79vDuQagF0dW8FCpzygThlkFRH\nk8iBU9JeJzjtgU1bz40S6NWb1vew1Vn8ylth9N608PN70qibutDCCpV7LZRP\nzVPTo8yNGhAtgsAYmw0j1aBFLhCA8f3tvPC7jwjACYm5NbiZy2eoGRoPq18b\nafgC1Qyk5qtAGIOYIZCdtnPpaVk7v3QPeNA1q6yR2FQvP5pAZv6jruVzb+CY\naP0/9GeMGG3n1jBqOk5InJojtNHLGvmESeBMkC3l8iGSEWY9ozAqPvN+TRlM\nUayN\r\n=WjJ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC6rJjKGSR27gfgGFP532v+JQ8O4NZcFlqkLc5XXiuzAIhAMBvzQgmNzDGJaKiV6rjR6X3+oGRm9G5qiDmnrGDNoWV"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.3_1559856345173_0.424459250018304"},"_hasShrinkwrap":false},"5.2.0-alpha.22":{"name":"@storybook/addon-info","version":"5.2.0-alpha.22","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.22","@storybook/client-logger":"5.2.0-alpha.22","@storybook/components":"5.2.0-alpha.22","@storybook/theming":"5.2.0-alpha.22","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.4","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.4","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.4"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"286ed8a585da272ffa34d3a80aed4b775af1f627","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\naddDecorator(withInfo); // Globally in your .storybook/config.js.\n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.22","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-kwLSfWfg+eT2K9eyzGQWtB6tBNSAZVH8kiIo5wv8HIc+fN9qfSpbG8cpOGkrBw1VR5xVUlD+m2AZVKutzgqEHA==","shasum":"14ea077d96fb657b8a99d12645ca8c86c6d4b2b2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.22.tgz","fileCount":110,"unpackedSize":895523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+n3rCRA9TVsSAnZWagAAj6wP/jRX5f18rRwV19KC/L5D\neoVSOqDM+Q7klDX07zzv9SkjcvtJVTc3gbX14ntgCsDOtNfwNzfIJ1pJipYp\nTsqTYIe0yMJWZHqfU8b5qjajNYhBrFvCKp00ABF28btMXrILVJWYzBe0+7L2\n6eOWFcCT2VtqKI4ERi6XNytI5NAdkbTcvIMLXQjZ3E0HzH3EhPzh+vzr+sZN\netxQDJjhXikxaoC60qsNMswXZpGmdIhkUV+eXGq0jxzEV3lR8H9SwPAPSxJ6\nvz8XZQwLSLhUHnDq9CCUNvMrtYnPrSyHWvi89372//LUXwtto8DLKO8CnKNZ\nYf1gM2I/DWWExbhRDSx4HMqNGfcljUEBxXiQqFl/PjV1WsWvfvPX0l+C8lvP\nb0nIBRM2SkoEIFm6xhmkt2YX6atw1E9YmkwTIzFFZGeYTlXVSjkpug5KHaPd\ng5um2VZLWeQYmsUqAiEKVU2I5aBON6tEOACK1YVIvdOpG15PVoMMuFm3yBxR\nvNUzGwz3I7RJZpEsLI5k4VNmtVSspkGzocxGcWUXrXlCfPs2x7GCrAd5HS0N\nkb6IJv31tW8/CdkdUu+GzzZ/zI7p2GE+Tt1zZMhF2aHfqdcaO3TwJr0PJVq8\neeTZLW5Vk6SluG7MjKBewWENOt1x7/VcoDE2SaN7dGIO+8D8SaCE6grjNsMp\n4862\r\n=hRcH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6b2b1MRxgpfDLVZ7Z9F8xKYEoh/p/2bwcsInRgLa6zQIhAP2PSoshG3vZlx1KYHhNEV+LvCWMg8iMLMSVfBc+whuC"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.22_1559920106681_0.6126379195162701"},"_hasShrinkwrap":false},"5.2.0-alpha.23":{"name":"@storybook/addon-info","version":"5.2.0-alpha.23","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.23","@storybook/client-logger":"5.2.0-alpha.23","@storybook/components":"5.2.0-alpha.23","@storybook/theming":"5.2.0-alpha.23","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"57c2036c455feda62d12d52826e304260177d214","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.23","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-JmD1sT4fqutp9egn2YtA+ClKgoL6yteBvs3cuafm21ImCFsMYrutQddWUWHg0XxAY0XsnIlR1VDdlMW/Do2hPQ==","shasum":"9f5ab0a4e984ee3e6c443cd047062a47c7fd7db4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.23.tgz","fileCount":110,"unpackedSize":895624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/x9/CRA9TVsSAnZWagAAOocP/0KpiD3RElKv50TwKIPu\nm+BfFNoGhKhZ3SfIEa4fwAFjprdIk+J7IRMl1UmzAYihLFBlSw6GWbRAZ//f\nWNkTw/qRNq0HNAMO/TM3VbsMWwk9Ejz+pD0uMxz0hfi6xC+NA6NGUJsGa02q\nBsySGvscdlzL9Q0vGqHcGUT+U4h2QkgE+Pb/Up4s4AYx7By/hYVHpTSrKYqZ\nVqRGSmv9ZhAxq9gMhcUm11b5iJOfA/eHElEcEBbzuIZcIHVLAI6VzLu7ygDC\nH7FWssk46rvVVl30aq3Aqxp+XDhwpr0qxAf3TAmoowHvFsqPJARTExFGPUu7\nQCFFdl3j8dQZTYDyxNc+qDktwzz/dKtfBl3nhBcpTikbRooAfTT6+9SUKbuv\nCDXHt6LsiZp2Su6vxGK+QPccABLjFKmbAMMxN7nCVYqqyfSEhP27k2F0BO6U\nOMhZDv7svdVFin19s9W1mTgGHFti86wex0JtHUdZcw9hAfoI3Jwvr+va8VT8\n2auQbGvkRyo0IZYrQ6yiWQnGl6mD47iQsMNlcnbBzeHsV8z3vVdFjcV990kz\n4p5h+FWCJoRu3gGvf69QylljIrhDXWNduLsjDkiOTKFeNtHlK85NZlqBOKpL\ncb1PwYX45DbGVh9iqQX9jccg0vUKwc6xooTxZXj7P1QQ7UbK/05dn7OnYLB4\nATgL\r\n=Bbg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEALvYzHkBcXv84HelqEGxLjhktTxaVkfnYAev+afP6yAiEA/aYszwq3cSmw0txXRqjb47wtSRh35smgcPuHWS7Pxrs="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.23_1560223614379_0.18379646900150992"},"_hasShrinkwrap":false},"5.2.0-alpha.24":{"name":"@storybook/addon-info","version":"5.2.0-alpha.24","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.24","@storybook/client-logger":"5.2.0-alpha.24","@storybook/components":"5.2.0-alpha.24","@storybook/theming":"5.2.0-alpha.24","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"64b7eff80642c641c94dc4fd1218d69844107e95","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.24","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-bOEYSynyEumWJ/7SOHhs3nhzSpbU9AevjPapKUfrmgawURsriNCEwteZAHcYwIfI8dAGK06es/KjbbVqz0eCBQ==","shasum":"ecb00ec1d57a45057357cd85ee01232d7eb1aac3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.24.tgz","fileCount":110,"unpackedSize":895624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAeySCRA9TVsSAnZWagAAZPYQAKNjWELJcgrNX+PooEoi\nuYmeVvSLDTyLqBLjWdUb2Fh/OB0tr6m4LgOTnlOm5gVI/jBmRYIu+ANE0X8q\nJ1FP2DOC2uhU73GCaGz16iu2StXgO1IHcM01OFDLBendi0YNEJqfXN7tdaPU\nGrIh4T0OZIiVh7x4JzpB0gfZupN0yoLypNQWOVXZMlMqOxauL8AWPwDO7Xnh\nNrQ+sCY4yzLGnICsNMRRZZ6RQ+MzPg9fEpqq6YvDSRCgazdO0HLiPhb9taoZ\nDJpaTipUnqWc7CbpG1BqEXbfYlwIAtpXzzlCrUr8v84YKZZWUVPw0DZGNA8Z\nNDK5dpH6DZAbrsfFwJWvPiBX0mkYP+dMvbqSJwvWq6lYeTd4zsRP6T13Dre0\nakJENKuOUYiZReUuX9s4SKB+KHRWzvWk8NCNwha1WiOzsGS/BO/D7e1SH8fS\nr7TmsB+rKSewtiUP5Lik2R7RX1znqCunuc51N0cqIw9WhvbeKIXfpzbv+U45\ny+SjlpUehvltK39+iZ5ybnZx0sPaTceUGaTePvss3Mz94UkzimQxFeyMAnM+\nDSV7i8J4/gkqs0js3dczEBPQH6xSbkwhnTNBVhRjM7zbIkzGpRyCYQ1k3WNs\nFwW2VIQMr7Fzr3WnM/QcIj0ZVI7yxCOBdyVIsICWmcMeVGw27/+kw+5yeGoG\nLh+9\r\n=dL5Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDudQKs4gkmCUw3VIGUiCfc3QzH/IA1VlBunPO26Cwl2AiEAuj9bOzqgOKaRA0S05z6xXegQXJHqm900EFmTxk41FMw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.24_1560407185386_0.2362460795924628"},"_hasShrinkwrap":false},"5.1.4":{"name":"@storybook/addon-info","version":"5.1.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.4","@storybook/client-logger":"5.1.4","@storybook/components":"5.1.4","@storybook/theming":"5.1.4","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6d3d4fafd2888b13d2cb8eb1aa987cec0100775f","_id":"@storybook/addon-info@5.1.4","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-Vc80+VVibfiohrJJ6idKRJjDCbed9mUjzq/+sLehIAci5M9jykd+J7ycMGMK8VIjFSBSfOXKLN2onTuYII73pw==","shasum":"ccefc3a230627acd9eae1bbc5ac686f9d46abfb0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.4.tgz","fileCount":110,"unpackedSize":895579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAfdoCRA9TVsSAnZWagAAoqgQAJ8hdGzegFyN0kEaiE7R\nUEqYxCHMo0OKTkD6p1GwHyRRSu5PAin8ysv4HpEhpA0mqNugCvICJJlc8Bor\nWNWUUb0WbadQcofQnTVQA8qVUCqgMP0iU0Tbkl5Gkz4vG8+6RkqGNjr5DwbJ\nnWyBQNjLiFhO9vUoUxIs6a40dDBo8nWBdj2YdjBPMyBz6gecGvBQo6mqUirT\n9ZAhGsdLfP1KRLW+xQjlYdeY/OJHSvl0dlnEQblHahcJy9Joy/HfD4MTKRVt\n+HjvmSadWpcKHgEURdweRJOCZsnbwgeydoP0FXT4+9PfH27OlaDk0P4hsvNM\n8a2nFFruIbGmViEG+UQ+HqnhwdTjwEe0fe+LEZgazdyAZHD+WaiFfF1Wee//\njHf5luTHkiTlJgkLI1I3qEHtt2+Bcofg5EPlz08IJTqzbWHi3hwGjwz33vcB\nf7oT8C1MYplJoMhmctJBZVv6Qff9Zo29Y1wb3msJ0mm4AlclGswuoI0M8F7D\nmP8Iaw4StmRh1HfSchgRoJ0ciRVkH75spaPpSG/Q60oXps5MoYuf4wEHflVU\n308wUtQ/xLhSQKw9CR2cFMRAWysAnTplx3f/QCF29vm2DscNY1wd6JMQfkT7\nWGWg22/B9T/uVkR5E1cxf1UH/m76j+t4NtcHF2rPGN1CSs9rcIGJd5kdzEEH\nLd2g\r\n=BiwW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICapekXHExSuod3n/JoiCJxb5DP1JjKTqOz33Iba3iSAAiEA25GueYpVWgoGfGqyKOV1sHuOHDDm3AVv9PY84qdrNiw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.4_1560409958833_0.7470118313129024"},"_hasShrinkwrap":false},"5.1.5":{"name":"@storybook/addon-info","version":"5.1.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.5","@storybook/client-logger":"5.1.5","@storybook/components":"5.1.5","@storybook/theming":"5.1.5","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"12abddaa2f144a65e0dc915939c8e3ab6dfd062c","_id":"@storybook/addon-info@5.1.5","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-ILZmNDHMdz63+vQqcdWyUYU9YoVcn52Tf8P9y92jojSSKrmhrfGmlYlTuFz4VnzPAcQJE0qtCQ+gkbh9mLyxIw==","shasum":"3064136d9de1902d2fd03542952a3ba9cc144675","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.5.tgz","fileCount":110,"unpackedSize":895579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAsnRCRA9TVsSAnZWagAA+Y0P/iyltn8LjWg274gJRSlf\nNDw6CAU2xnpWMXfvT5o+Sj7slep0kDMsQo5mnuk5LOM6I5T/nBgjBYsl2EGP\neqPOTUKs/I/8zU0KsS0HEVx72Jxr0KEm8V7tIlDRWQ5I5hPeXaFnNwO2DvN5\nLlbuDTFc59JutljSKlIVkG9p0Jhgvw6sDrP9Cu2KWn7lfAvWFLZlausMV1hW\nv8mh3IOuh3I/6rgXnx15kDMPtHWIrAwaKGgf6pHDp1SrAcz+cwgh/tsLP9HM\nA9al7HP6kTjKLkiy+GQRmloi+koG3IIoXbrDsTNsBTs8+TUf6nNX/1qQ3iIL\ncPf1145tBLe/UG8HgVfGd9ZdwAfeg0zXqtugdcDHEJzTPITV6gZekGhruNUp\n2rU6PudaOPgqX5fwds+FRqrSTbfhkBGlEePjLfiz9TcYf4p1gakp16rRQCIP\nkcuYD4Tz9n46c08Wg0kkCb70/9EJjYo/MMdW0fnHoXWb9SRb8WviDmuxNefh\nKMB8KjR00PhhhfV76vRopnNHN1u5jI2HS+NTDTgWqPcVLL+B5QnbQdFAjwjQ\nskmflxUthyR11rt/COlHOug+dDoJazt5P9fCLnbkbGWHLl1Ig7mh8Koa/Own\n+LtgGIQu7UYj6u0ULqgz8betaO0iMmQRZEhc3SuSDpGKViWdG6C5wu5oBnPp\n3GzU\r\n=6+Wc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXxQEkGKw2zArYMSuKk6LCaRPQLXqS+Ear2zmSOWM8RAiEAuq3jWiVAlQBtLf9P3xEFAbx2VzKimmT/sGvnkmXWNvE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.5_1560463824723_0.5493652333654118"},"_hasShrinkwrap":false},"5.1.6":{"name":"@storybook/addon-info","version":"5.1.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.6","@storybook/client-logger":"5.1.6","@storybook/components":"5.1.6","@storybook/theming":"5.1.6","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"892ac0b8e89a64ddc438d6e1d9bf4fa0a52738e1","_id":"@storybook/addon-info@5.1.6","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-f7wKeh7uBukX8/Sy8Ge6EJKYD18aBo0HF9kuQ9p1No3+FdInuTvBiiWXJ3A4haDKo9u3h1rIeg0mL4UOTVqoZA==","shasum":"8730ec2c54d4896e924f5711dba2a0326dc82a8d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.6.tgz","fileCount":110,"unpackedSize":895579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAtqhCRA9TVsSAnZWagAAfbMQAIKRTMyNHkFNic3iaBQD\nzOYjOU+j2tZnS7f/+diyv4tLYNMT6snwiWLGxK6zsIqbr4LZ603u8laxuX40\nzjl6USvnz6pUu4903A+b1WeglHQb3SH2WpYfX2bNTJOxIUsfkLdkQqyx/75D\ndKOYHFB8Bh0Cj7RnU/5BSYUyDt5OGCDBOGEwcToEszSp1g2U09uRCHFHWz15\nZBHXFRVagOPLe0qlUUCOpyfn4tDBz+keGqLARrvYebMLoJL8cQhtIQyRsMd/\n8Eju1tgB4RSV2Hl4LIH0fLdnCC7xvagGOjWZI8V0CqMdT07G5yMXZehsSCeT\ndiDFXKjVeMdBbkShx7pecqujptn0fmE6rWjGpB9pOghzqc+HqR3Yp/2oCY+1\nYiWn+7xhLeE3MKqY2foyPgWlEP/mofT9I5XmAlW2BM539Bcf/27GNM/C1dQc\n0uzgw9ms+gibbsZ6/zgjh64qd5o5pOuDCrHhQ9PrxTsS93p/F3o/b3ChemHT\nL/zPXB4t069tZ5DR9kQJ7kULQbY5ybaLEEidfMR/UswjYcGYMO3j2BvarB42\nuYgTDncvoudKeiXMdrLptUA1Jk7KiFEP5e679m4B3o7UOvH14OPS0eW/ZB8P\nTxOcmxLjWpAX27j4orTwC78QOQkQfrmO9rtPUOvPYMHqz+LJDRne2e9OCBRk\nF0MP\r\n=SZns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6SWiQaWyBP6yfZds8RLEMueLB2BtdCcUNT4KXFm7phgIgC/Z/PrMagH7n/yyfvNTb91Z3giR0IPi7MJ6DI7lgB70="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.6_1560468128731_0.6442719360888414"},"_hasShrinkwrap":false},"5.1.7":{"name":"@storybook/addon-info","version":"5.1.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.7","@storybook/client-logger":"5.1.7","@storybook/components":"5.1.7","@storybook/theming":"5.1.7","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4c4c1a9fd7461860299ff70ce1e548536a912664","_id":"@storybook/addon-info@5.1.7","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-G2XhlRCuDNAoPXkWjVEdDdykH/4zW0bqAwpOQYXDcK51cUVxkrJhUf2xn3IJSIffzDZUbFVvvVjIcJ7i0kZpog==","shasum":"ad934d5440aa2c8f1640fce787d8c20f17ba7492","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.7.tgz","fileCount":110,"unpackedSize":895579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAt6jCRA9TVsSAnZWagAAtSIP/itaDGqiqsuU4Heuz5eA\n1RXpsPULVJy9BvQXZKpn349KOprjvs7ukmbi6fBmUR3fwP7Awu1HCGPr/2gG\nKqnElNZH8hJAvV21i9QU2ZR0v2goLRCHBv+GCdz/VSSxNlzwmYTsF26sP3oW\n5qvN16yvvpKW2tD7i1jF+vMmsgj4JmqIYOGDkYMnT7mzvOzlEMPYO2XwvriV\nX4JwWvdQ6LxM5NH6ETP8fpApLDnElF7ANvkdr0tpecYPWKX87ZIzeAPnbgsG\nBVtDGRPqYwCtd5UF4XnfQ0yxSH/QdTLrp8oz+tvItQdxkBVzaSm0z2gczk3d\nnCtoBdYtYzjFeWVCDu+N+JbTjTvE08NE7cwC5NReLacNhT6VakThYIH4RHu6\nbYF+OZH+wupTPguFs7YjgU3UXEhQPSOdLr+3/ahEawbSCC4d/9NaSAWzum3D\nlONybHBpgMxcavwEUOL+6So83qNMl6tKN2MozPiCZE08rkdJhaB9Vv7urHXe\nx2yq8aGVaT3XL5YBZi1N61Lwuocs8qk2zesU94FlmqwWlu7rbPAAuKX7TfGk\nFVJlwD2lnXX+IP0k4TwnEo2pVSeVlXixloPzXVq0anQ+A7tnxTWlX7Jziy3+\nxpHHEgSkZlFwlH9xEgC0TNJTXfN/gPWok1NojYXJqNatVfM3iKbGLZiPl4cs\nsXAF\r\n=NK92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHI05DSdl/t6MRAafmKPxDbyvsYW9NQhyXEM9NuuuaFgIgIocRffd2Q411ODowIvz1si7tU9sC6QZKBhrYmv7wtgU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.7_1560469154472_0.6220344443300685"},"_hasShrinkwrap":false},"5.2.0-alpha.26":{"name":"@storybook/addon-info","version":"5.2.0-alpha.26","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.26","@storybook/client-logger":"5.2.0-alpha.26","@storybook/components":"5.2.0-alpha.26","@storybook/theming":"5.2.0-alpha.26","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"868c48042b65ac987e1fa0cd277fdc96f3dfbc02","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.26","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-DtBK05pgUquDFQkJDwgdsTzBq+RIF4bOyy1ar9CseKN1E25Cqau0vPMgN6fBegZfuiuBDZQip5qSvrtVz7C1Xw==","shasum":"9b48c9c93c0cec9c93071a963ad575e5612523dc","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.26.tgz","fileCount":110,"unpackedSize":895624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA485CRA9TVsSAnZWagAA0EAQAICXH4xd7t9G+gfvtVCq\nOpbemLP4oDxCzg05BCw3+QBNZcrZfn5FDZzFV5coOd60tfLv3KEF7XBcA0Ya\nBjTY++OkQ+jEQfvh6+3MFaG++dAXwroO9KYHnMdjiQXhX8wrakzzgfd46x60\ngDxfrulXLJr9RUFWZUcKFwYcDDYsEZzuWa1uZsm98fXSuhqC+FmjRE9nDnh1\nhg8SNmfVcsX5RYCksNw74lb8hx0zJAQYdUMSpALideXUyfwpIlP7fpW5CD38\n5VM9Kyfx0se2n8fmLaI0XNQX6biBwQkCtO35TjqIIYJ0dCeqyK7L4V+79VtB\nLFlJ0wXcvhIozTjspvxRI3kTj7H8Y/Hd7EZ3c+WEIcaxMIXM2vK6dacfZEsp\nD5hGYW0q2MIaf2fcbtD9IvK1U0Q9QZonePia9njZzCEJ3ya9Ze3Lc77fNJLa\nxnOsEaNMYpeRnq4CWRxgYVfDxJs57uVwA2LZsj/8dRnWVb/fq/vRAj+mIC7P\nJN0tdXCQ1eeTL9wQ7X8MQHJ3bb6opFmGT4RJ25s1tkkoiS0bKum4DELpHaeC\n/8a14a3bdfN8yii6sAyA4u2y62n/ysF/uTmNmaIY5HmMMJjiSoxZbAGbKTYq\nTIQjfy0keaEn1SEJ+R/EJQOD5ACw/zHaOv4iuUy9BrBUnmGsOLSP0GKvh3ZT\necP5\r\n=jWRK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFNAbX/KB7NGyGsYzEOeaBd6GBw+VHfj0RX4LS3EpfcwIhAINEf7hhpd+b06dOy4O1jUU9A2eM5PTDn6OVFhgy3/Wt"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.26_1560514361223_0.8958625594387326"},"_hasShrinkwrap":false},"5.1.8":{"name":"@storybook/addon-info","version":"5.1.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.8","@storybook/client-logger":"5.1.8","@storybook/components":"5.1.8","@storybook/theming":"5.1.8","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d7a96f899bb0d90ef0b2ea7a098df9467bd90670","_id":"@storybook/addon-info@5.1.8","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-5uucvM2lOhb+RaS0AR3bMdXGv7nOYTymx8Q6mrePGBsyKjt/7VozbTTqh1SvO1e+sDNKi20JRV3lWOYQ8F5brQ==","shasum":"9eeb69cc9a98b5250c7ce9a21abaef1366c3849f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.8.tgz","fileCount":110,"unpackedSize":895579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA5NICRA9TVsSAnZWagAAlWIP/0iRRR++5IzXCta8eLvz\nV2d1f0hR2xZ0Vwz4uMKm9azGCC4DLV5EykHSpHOcU+u7W5nZ0EG7k7ScwtUU\ncblCn9gC84lyLxPgV82PTVLkd8/WlGe9cMHTSAbtjXGnwW1H9GmE0loT0f+F\nHVMriG918aLTCZm8REfsDWxasQJRs/d1IZp9gdkXKJ70UxwV9Lpy1v0G/WFK\nRGkmMyngDVzijWDWPDPg3l4G/Un02Hvj4XmG8OYkdswO0ypwSPnZ8zG4zT10\nLx8uv1T6GSGlvbk4MECwKD2PEu04NX+fxTq0viOFBG1LSlffq6rh8CZEUyJu\njRrw7CdQ7nGDc+dTrERKN70utQVhEP2fUgTrVu0su6EhDICfAPljyn6/Nv+Z\nhHZh+oOsMxXjwRywCu9gHW9IUsTlpYGuKSEjiA62xnrcyvX1XZ32TF6Gws8+\ndho4+JfAoUiYoTnOlr+D6tWMrs5yl0ogrxQ17oPaHyKO3zNpoIs3J+Hgusgr\nfoUOQayjJS9DlCeXiYsemYOg+Nuw1ZDt1pmRPfeKQ5O2dBc2b9rutQvZ+gvK\nzQhQHMci+vpD4Fk5pXqn0jxJILAsuu7aX/wzafyn1ZjZIooyPVoCs+c66TkU\nwbHd9Z8zePqHajwS1oAQU53SKFWZDMTAJUF7b44bZiwp9mzImvUlwV5cseQc\nEeC3\r\n=F7IQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD34e9avKALEWqZuwymiRQprS7iD/dWdfta47n5jjSf2wIgMJD4WNd6Tlt2QL8xWXgZ7jqN2L5MNnF6Pg9VKp5FGf4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.8_1560515399746_0.5513614546060823"},"_hasShrinkwrap":false},"5.2.0-alpha.27":{"name":"@storybook/addon-info","version":"5.2.0-alpha.27","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.27","@storybook/client-logger":"5.2.0-alpha.27","@storybook/components":"5.2.0-alpha.27","@storybook/theming":"5.2.0-alpha.27","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ccfd082e797ae50ee6f45e822f759051eea949a2","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.27","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-qBfKqLoCysaVU8WPHVT+q9KW3+otFcOlcfLBu6V7/nbZYcsxnwnNDHHmvgZTdw/E2LZMiiSxIrrbln3ZkRED9w==","shasum":"ba6686fafa53d5768e48ab43e75707d1b2cc2032","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.27.tgz","fileCount":110,"unpackedSize":895624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBsjbCRA9TVsSAnZWagAAC+kP/1MKqJ2AWNtdGTbyjMzX\ng3tuiVyZtpfR5VN+rQy0njKd1yAN8AlxyO8ZOwQEgeGXb51lQhJbv4vVOYuj\nMMx9BPG62ol8dMfDbFnn9is2Sd2vxu9EWrCDX+fIWdXNd1ytqXSSfaVlgr9y\nxzPoU5i3Ow+vmQPAjPjqEiLQqVk4Sausl5aBd7i8zn5JGtHCCx40tyOi3WU4\nEAFcxnZwF9ZP0nKfBNjt2XunVVs3/l9QNQcDR4wroc9wr/R5e7I0lX/5vVCD\n7P4wQ6byJTUaaIFyFvUeHntYunvDwO9JLJDJUXXdXVV2Z4GZJEUcy7sKJY3F\nhCAQJirR5SgfptOumxZmNoTSDbVi2Dl3x8SgFOhJhRrCbJpgzZVvNpUQpae3\nz2rRk+dcJUp1jPEke40B8Xxo6eYSsZDky/qWxaWzj3fA5jkAdE+wtdjB4CYP\n02hFuVVg+0UhaiKpjik9tQg7iqdvkDlCS65j6CGxkoqFVLL5Qq7VMQkAlu4K\nP7GUVdhDkTCc+TM5/dz7Vx4yB/WseyOry88kp+Kv4k3CZWVCiWYIGwroAAH0\nmNgwUilxbF1agJUb8E36GcTuTflZc/12UYULuaVKqznI48L15cQQAA60bk/c\npa9zkTEdxSNgN9wZ8xK0V/3H1ugM4rJcQ2J2246Hv6+qoW1gNYWV+eZ+mM8r\nTZLx\r\n=1LW+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCScCv8UowGQ6VokTTCepcmxS/Fy9Kh6XJamHadTKA/4wIgJyCdwr6TfnxpHvKnjBBGfiMVWcwvegeLGwjvvADxA7c="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.27_1560725722492_0.9800626378276545"},"_hasShrinkwrap":false},"5.2.0-alpha.28":{"name":"@storybook/addon-info","version":"5.2.0-alpha.28","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.28","@storybook/client-logger":"5.2.0-alpha.28","@storybook/components":"5.2.0-alpha.28","@storybook/theming":"5.2.0-alpha.28","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f4576d1118d3afc4b588f97c6070355515dcabc4","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.28","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-7jiOvP64iwOPfFoIIpN6TUSHKpf0QdaQz5+r3+FGV7aLJVoJiAjwxpQL2S1RkVXMN8uC8jgxYf6bGSlOUBxkaA==","shasum":"0443bb43b08275334e049451da3b64d56d5d514c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.28.tgz","fileCount":108,"unpackedSize":1395059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdB6thCRA9TVsSAnZWagAAUyAP/0zhwZjkPmDxNB55mf6s\n1tDcRDbAASYbW83cd1b+trU6wGxsi8AoBEeJtHXkRMT9EfneNKUaQuQE+VcC\nFnjWqzhSaHxq+zhfGmNfwnFL31Td9qMSL113firkiLM6SdZNvAgU+l29rMIm\nTLXfTsTP/avajf8lNqSvvHOxC9LHkwlasafJcih4O+D9vrAE6hs9C4WcF8LQ\nYv0VpKYwMtf35Ly2VxVYV1PKmx+mCbQT3DqQ2wJBh1m+ADyjWrkEm6cIWdG0\nVSsAou9+QWCGlgUcvCNuL7fZdpdZU3xLdDFkJGszQ354ZwXi0s8GlW6XNl2E\ndSlh2D9BCXBYPv9ew6BSIKxTd20UtrEYI0tuzbmsTSPFclt8WzR2aqXekrVP\ndIWgKg+1Mbz2oJaOlV4HvCJ7pJ7DXplIYS8IU5Bq7CpmEHWIpE28NXNrYcuD\nr3rrlTMyVQRZ/norrDvh1Pvvb/vtuedI4SMvfA4hGKXlXaP/2RD2mOdxDq/B\n0comsOt9YvqT6SpApliuw2y3Vpgzo12Nr6G9kKfufHp7g6Hy9eGjT0KjuIQy\nXuWse6wnKsWDKCyQ8twysE9z39j2+8uHOicwD/r99/UGQxww8beAtn24lbH9\nZdhMxp3wvaMyckfoDjinz6F9XRcnjUVGGMZ/YQn+bsG/3klpHvTAmsIVO47J\nwinm\r\n=JxVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7sXRxuvPzFKk+osSm6vo8iQrR7w/YNVvCwJAqDRcYuwIgDFt2dwRSTWGlHNlKFaRUgSHDQgrz2ehSaWvsNAn1GnE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.28_1560783712462_0.42336632784312744"},"_hasShrinkwrap":false},"5.2.0-alpha.29":{"name":"@storybook/addon-info","version":"5.2.0-alpha.29","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.29","@storybook/client-logger":"5.2.0-alpha.29","@storybook/components":"5.2.0-alpha.29","@storybook/theming":"5.2.0-alpha.29","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"113beb6a0a39cbca06d6a57bf6983948e9bffd55","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.29","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-4/RGIRLJodkBRUyqhPJQXQwTNsZW7HpAzi1jktoyyUW/qHG8Zp4QxIIerJAXoHiEJ9/i9FLcgc8zusiWmq/8ug==","shasum":"40c1d78d34d617f3bd411dd0195a12e5d3c69b7e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.29.tgz","fileCount":108,"unpackedSize":1395059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdB7DZCRA9TVsSAnZWagAAXZoP/2D8EENMvsg2Z8zEwFzx\nygZrGmydo1A0Kapiguth0Aqh0Dk/zT1QU5zp0+nFxNk0NDvGEhYd3p+1FsCp\nkh9LMjYVRrb45LKPqdWnG8T9vlXVEWu5osGkazaaLEpKk9M1ghOXDA0x2wrC\nhcFA3pOgX9np9mHFPVL56KVnMZrVyBDT4wOW9dtESFsH4IwF2mc6n5f9rtlF\nxsFDztJXEpnv7C2nJgaoOcdJoCYAfVpeia+hEbIiF0xvX2XmixQDrKG6XuWU\n+UYHto3z4rSP0ckWOD7iqy1DkkSpqvW2Kz5w9qswSu4N5sTMHjmSOfF1qJ0B\nhRtsMd0uLjV4k/f5xHL3eLoILoVqI0nHYP0LNh7hX/V7NaOR0UgQn9zkboyQ\ncTkiN5+57zLtCbD1XidU3XxT1zv01bAz0Pmp0gESYigJNpf/htJagjfE+OQv\nHKR7VE0H7l1QSNb3+nKCclDYRB8h13fWZONOtFTGxXRhINWe8ceaKxCwUs6h\nmc5EUxN9hJi/00v++9A/0MXeDBdldFrVIPETSPYpt2ssPVB5Ih0Y15KgrPQs\njrkAa60XpWFUgPaRaQE2A4fAjThSDsNEsYSNIzYGqhLzlg95aWek+7JdGdSk\n28pNwkjxVAWbUyrbF0C7eTtmCR4EZFjIt6DAbmEcltVtEd9n9OXY97oPCfK4\nr3H7\r\n=lix9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2H0GYYA0YGgQO4iFQ+KS+20M6GmRtkEK7ksYO1wg1fAIhALJ6rS0oJOvXsy/45j/lkbPosHfDlTIeeeanz81H+l0U"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.29_1560785112315_0.25941223412624814"},"_hasShrinkwrap":false},"5.1.9":{"name":"@storybook/addon-info","version":"5.1.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.9","@storybook/client-logger":"5.1.9","@storybook/components":"5.1.9","@storybook/theming":"5.1.9","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e211b3765e57bc7cc32b8dd9579d86ea03a6c5ee","_id":"@storybook/addon-info@5.1.9","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-KWGhW8kv/VUj4OnWyOmZx/Kq7CzSLGMIXFI6UQY9f6j6QiyShSaOKXgbNIhynjiYHq0hEnfbgUvws2DC9dDFuw==","shasum":"324066b02c7b76bd459d44ad3e6fe5640b7a8781","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.9.tgz","fileCount":110,"unpackedSize":895579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCtTTCRA9TVsSAnZWagAAo4kP+wZqxlG7BEeRD6xyi19m\nobe07TBdS637rUVATIm9op9LAYttHhWU7TLV/chBUyU2aIBPGeYO9zraTVTM\nB6eza7yAUR3Ad9sU0W19lmgCU7LPMVRYzFi50ZgC5dIVCN4cgiolbwQ8OYv7\nGj9U0NbAoLUFOF5OgX1Zkc5CF9Z+/ISdr5Jrtk/bPWXpbZezQ4TuknFlEPTa\nRYGhvujQZCZcpezSe4aZgEJHkuIfEXeIqBXU0qE389NMH2g8+XinZxfhOL9u\nwDiGrIum86AymCqnL/1WBOZdxtm4Lm1dyqSLkAKB+c1g1LwSGYg5Z3HCbUTg\nZRYDBpRuBaM1CMOH9cnIh5TuQoM5mZltZ4nZtwmbdDiAuWN/TjOeDJOmJfm5\n854yebUmRMxkKd3tkbuILgZNQflKErVQuF4bJpwlH4QKMAH7jWgADMFqCSAf\nY4lHhb6gUUmOuiUmnRDhBt1GGwkQ6FBAOmahEaW6mARXwYyNWfM4d6KHjYBh\nMsUfytrmVz4xhGJ8k3Yu9rQvx+i0QT8PfZ8rBpXB30CE0oYYKQR+9jaltEX7\nKvPGcmQH42XRFMHCOSCqOqwMubHpSh5hjS0jiYNR5n7dWrc4C/7nV5pgdLCo\nS0lFd4TQ/3GXyGWdmIJPGmr8QZdljtYXQ2xG54cMa+YmjTiAyloSu2bWpBsL\nfIDM\r\n=WTK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXfatbCyXxxI0pmneOFG4iNGR74ewDEHx9kCWUWi4HTQIhAImz5T7wCCRaxKupwpII+Q29c4dTVqrsVGIWtu4f/30/"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.9_1560990929935_0.5767388935445972"},"_hasShrinkwrap":false},"5.2.0-alpha.30":{"name":"@storybook/addon-info","version":"5.2.0-alpha.30","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.30","@storybook/client-logger":"5.2.0-alpha.30","@storybook/components":"5.2.0-alpha.30","@storybook/theming":"5.2.0-alpha.30","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e5e0aab372783c76e8d1209df7240f4dc2cc57f9","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.30","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-8M4zH3nmbsdm6rqRXaztyRtbQ15uYOElT3AmGETF0dcLvHjmUkGWtgFV/1IhEliDDZM2vV+M5W7pfw8QLqv1+g==","shasum":"b9572f77d997a7232872778559509d2fdfbb9f70","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.30.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEhJgCRA9TVsSAnZWagAAA4kP/jtBemomMESVJ+ibFabr\nnNMFO2ebHuIwGWmFy826eZD/Ck7kk61gpUS6aqUp8FK1qTV7gOv6xBnjLioe\n8mKCpVSJJQXEr934qU3zuh+R7dqDdz/15Q5rFFQXuwA+mQYkoMXZGx5jH8/y\nsftDTv1y5kdpd5BcQcx/8ggO0bG7FpiIzmTV6jS2Um2wurnVgX1lnCw8P5xF\nmV/Y0gqjooDpFOiGnsheM5M8aqFJdCDL0PzzduCKKqEIrf2xrrCP7uxQB3Z2\nsjWxfOLr9I5XBLDU3Igl6RjRrYEzJbYNsSEKmJDgYJroZAboVZA3JnfZS4ZO\n8YEDgIReUm6dZ2DK7kWHz1sqmyv/5zWTFakBFxcXbs9VgZACS7w9DEWFdGPr\nkwFZEqKJyeQ6iUKyPsZ2hlD7m58yeczmgd9H3Pq4bHX83ZRaVXGXt615zQvu\n3NmM6r0mGv2JIq+yMr1TLKbQiJoDbPNFoVnVfy07wXhP8RgqqWH7ZCJmtqI2\nd7TyTpPrlTQ9jxQzfH/B8pnOWFjibuD94+nU9FoC8nxJ0PYxKkDF7xbcPeIC\nMPHbo3Yj/sDT5j13F80kQEk0lvZyrwcnZSofZsLDT224sI2gIoc02iKWyZar\ncb2oE4eL1xsNX0iUiRMQF+o/5d6WwiF6L/FkdS+eKAKBaSrX6pwVaiqMHQDs\n3gid\r\n=GGH/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCaTu7CSqpIUMWPFNX3Q9nXtlOiczQdtBEFobWY1X6kAIhANI7bNToBzuW1AWFGQisn82uy4O13JZijx1pZ5NfJRLl"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.30_1561465440017_0.4048254321819895"},"_hasShrinkwrap":false},"5.2.0-alpha.31":{"name":"@storybook/addon-info","version":"5.2.0-alpha.31","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.31","@storybook/client-logger":"5.2.0-alpha.31","@storybook/components":"5.2.0-alpha.31","@storybook/theming":"5.2.0-alpha.31","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d6843e3e5ec041832f281ad53dd95965f8de7e61","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.31","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-qFnyPCgE3eobXF5dFr0Ht6xSXfsWOn4NueuJttDDpDmlSzWBDJ0TN5iG6CHMAuJ6a1wpqU2OQO0spQlLUXOz+A==","shasum":"40735e6d00e747f1a9185acdee6be4a6396d819d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.31.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFEdPCRA9TVsSAnZWagAAjiMP/Ajjs/CX7Zb3cOkVcDRj\nHFcYexaP+G0og16wi+epameh7A7eCK7avVU3jFGIqw2GzLFo1md5gCd0+P0O\naf27iklvfKtYl35ZE2V5lRNEzLb1tXUJlvw2Qv1UiyYCMvbxIzJZB7cc+KHn\nN9AdzoxWDkDgoGOs9DUsewb/sgnAstXTOQy9GB7lw8Nf8jtXIofYd+CD3u2I\nW/UzoPNLrZi715dG+wbBRBqTW10weA79KehCls9DZMlXP5jHfuEoPMQ/auFE\nxaVQFLyN8OAMeNZHBn0j7lSqiT8FXc7mxbm+LSFbf0cO1dgk+9G6OZNCAs/u\ngs3rreU5z+Ppjvh6SP1EK9w2hr6sTKAM4I5K/1cmm5OFJfx9x3xoXPRLasTM\nyzSNu6sks8yCKe1qhZc6TMg3bFPYrlB5ybulYc39EoIo/DI3I3BFgaHXRtaX\nzy68wbxgLGq4ttRw0U78SUyvS0KE+3EgkeDJTOjdPH0MOwEGf7Uoor5Y1gPi\n2c6a0bAFy2bP86ssYFS9HbLhL6IMyiXorgsyF19z2SlQn46oCsm8Wb5Gsi8n\nQNuiF3B6QLghM8Nh4Y6Myn6rzwc8q8kKSzAj5aIjW/Dc1eqGRdZKHe9TcwVi\nGVyK+nVBBfv3yAo6CY6SgPamV2LsrJasvcE7g/sTcl6KRWtObhMysh4/9gVN\n8DMJ\r\n=/Wjp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtx7C9O9dTB6H2JPzEExsv0FhmW9xjcgVSKrGYpuDUIwIhAPx65YkxNYToR31XdOmotZVJUA3m76jkdWrJFDSoWkGI"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.31_1561610062480_0.30962166200201047"},"_hasShrinkwrap":false},"5.2.0-alpha.32":{"name":"@storybook/addon-info","version":"5.2.0-alpha.32","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.32","@storybook/client-logger":"5.2.0-alpha.32","@storybook/components":"5.2.0-alpha.32","@storybook/theming":"5.2.0-alpha.32","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"298866f7372d24a9914a8ea19091bf222f090e77","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.32","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-Y0W/+pM4gOIPOMyOBwMX37DLSInIw+JPcz1XNTf65k+qpbKW9+cqXELL01ZfmsGqyzmrX+n4AuHKFv5sE/KyLg==","shasum":"0f2ec4f1ef9f4806eb5dd5e947acec4fd320bbc7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.32.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFtt7CRA9TVsSAnZWagAAZUYP/2vyc871p/3l73qs+FEz\nP+CTddflnr4ZOJT5ijFJGGpH53HSK4gLERi9YH/oeXATAr27cfc1KhN0GLit\nspq6i6+iYwKPqbZ08LdPK16guoFhGlEpdXGdpZPQXhUSNIYHCp8dvWq7MKGq\neD9IVTuPcL7pBUuVb6ueO+tsUXw3XizyxLJA06GH9kPMIM0atUdAS+6CM8VP\nGJNSnwMa2l+vvqRR0zywi591VavbTW95BRQfsI5QuFkjATDqJcLo0rkuPcy+\nGx8IRtoIFph8S9SBbR6KpalkAEyEHH/m0yu/hAs7y8tGCxyRWq0EYMfdp5Jx\nBlSIJU9Ua7kpjiHFYSkdhc7LVZSf0mv4GDsqQqbZ5BnyFTsopTfm/05NhcRi\n1sn3mX24PNU717Ep+murHNlE/8aT7KPXHmIJrVuKVXW9sJnLqx+xQG4RwvTn\nmnrAPjoISBLmSW6lI+Hzk259BQPnoD8PUWbuswsBG4p5eQEjNJ66DupcR+H5\nPCSaqMpkLqxd8b0T9v+nUObuJ4cqkNDTJZ8+rAkliFnyhcT35zp1DPv7tCvO\n9Na0Qf2W614x/LhFsNZbBg3hmv5XSDhiTu8w2CCH1XmuMit9azwV/IWwoDtu\nOX6VXn4MqI/yBUGI20mYrlcPr9WLO3LzvzrgZvq//MGrlM+wkmWknABANOzR\ncQ3z\r\n=K2Y7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICECGhvy5cKUF1D3KZt7pZPbZTnei6a0iCspzi6rM+xdAiEAxm4NNhh6X3MuhKyGlw+lVmvklHWSKfT+PM+MsCShki4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.32_1561779067126_0.6713624292753853"},"_hasShrinkwrap":false},"5.2.0-alpha.33":{"name":"@storybook/addon-info","version":"5.2.0-alpha.33","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.33","@storybook/client-logger":"5.2.0-alpha.33","@storybook/components":"5.2.0-alpha.33","@storybook/theming":"5.2.0-alpha.33","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a0561d267a393bbdc0e9c5e4114fbd07bab54618","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.33","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-HWYkMCSVQVlmXELrr4seVJB7/jpq7w8GS11sMacxWVHBT2b29RTOPW3ueYGM9P95b5TZkoJZsMpvFnoEF589Bw==","shasum":"ffe2209427b07641e263cdd620ec979aa18b8bd1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.33.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGeu+CRA9TVsSAnZWagAAfCMP/14tSXlSRS+j4e1ISyS7\nC4AXO0V6VfbfXofdDU4oU8ZEWUVgh//xzT02TX2k/wzok/vsenfs57Pv1eiB\n5fXlvv0L8bUzkxPtl0F5L02vdSw1MzcEBAz1f7wm1L1BHOyxZFCeqimI09u3\n4N4F2EF9HyFXZeaspz21Xmxp/d7HrifWpNqCyi/ssJJs4vPY00W89mH7NXj4\nGm+CrV0ZKHXGkLIY0+V+3IUix8IjMkRRB2JgA/gyDFY3JT5XR/FYh0bP8DRL\nCV7aw66Pk92eqiOmlXDK9d+voKpTBhu21c+ZsHxvB/62D/DinJ0amzO2itdr\nN4XeGjMTAecdjVzrSV7pOlBz4IqIKC8R/k+aT5axigxruIoNxV5/zO1Mhmvy\ndwZrHWYzHmxe4D6okqHn1UXGVy/UljRgYZxGDsk/iZr7jPS1DsJqOV7S1aDP\nOPj9Rv5XlnbEe4GVU6oO5zQymEocF3zoGY7eLtkxjJWjLjXZrDztDNMaV/AI\niHNJTRS8VBhTMsPMHRXiqZxYweBe0vlUVmV6ni8HhVXpD4kf/dJXlC/rKIUt\nFri3p0KY57FUeuL3lYewgWSDzyax3TCE2XPHZTHtHx26q930UxXCZLqEDWk4\nj4XvCs4DKykspK2ElTxtHysqcK9rcwoaK5EL/ywRDa5G8ed+FYs+rm3LG7Cl\nhbEj\r\n=wMWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+89NCYwzKgRD8z0sJNs7pZgyeWt3knvgkRq9IaP6gTAIhAMIdalCQGVJn+y7dXViEsHxOeoExs3cNPFWBt5lSMxXQ"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.33_1561979838105_0.9231869406475177"},"_hasShrinkwrap":false},"5.2.0-alpha.34":{"name":"@storybook/addon-info","version":"5.2.0-alpha.34","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.34","@storybook/client-logger":"5.2.0-alpha.34","@storybook/components":"5.2.0-alpha.34","@storybook/theming":"5.2.0-alpha.34","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"367f72455f59e5bddd0054d421a05f3ba04f0424","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.34","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-N+0zfUwZUJby7Uaa93Yx6BqULz8Ys9PnS7oJHfBtNFzV6TD/mR2NaCcIXDBFQ6PGWQ6sM3Sfo7wrkpwb2XaIWA==","shasum":"b1c0649bbd9f4813214db122d71c76b9fa74fd10","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.34.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGrVcCRA9TVsSAnZWagAAkY8P/3kuWWM768HdYobbrTXK\n7jwrhgKEDvdDpqlOE9V5AFDVyWpwrHR+d3mtapFQ517Va3SH27o9no9qzlht\nYZfDeLgCZuwId9C5+m6Z7bD+ZTo1RlAoSVlzvy7R94IbJTCpjY+/NyddeqR9\n+bLiq7ORHi00JWHR8LwY4QPBPnIRQO8kDwsVPxbC1qRMjY5zRex7hJ2QzEL4\nzWBNTtzHvDUfPoGzgtjwGhtmb+u5e0VcEfRqnqpcQe+XgffItmuaa2Tc2+L8\nBU0AFf5tmH4HylSs7DaWqwvdquJup8xvD7WejamS0XhyDfaxXkL27X2o6elo\ngfNQDEHGcHFv/d5Pw6kKRLTYHgY3xQ4B4YG2/LpgxsgzSW5mX/zqRS75DBna\nxKv9CHs6RN+BDrxam/S5JmBaWbad/S49ckOHWqSWLqQISMY4dcvAfxs5cY/9\nH3Qp0bAOSGQ2Reui+hWwhnb+qtSQyzvhWdjcKLyh0+WTKz+w7LRDSaRPfrvl\nHVA7WiHF2T9mlD40FsNkMl3pVfjKI/I3qOlVUv39m+5EYXq5i8YoEW3V6tZK\nWUkyai0j7xpBDgjSVLbv9uEZuDKmVWLKV3SaCfSRNgUlgymgBreZxzhhqXjb\nBzLzQyJT7M0RLE1p5jxk30UbSrAfroOL+9gOwocLMGlD7v8iP0I1J6mrt/r8\nbNOK\r\n=Baqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSjrIhDF1nZSZ/QtDKvIiPa3ZlQhIrorTegyHJAQPMYwIgTS1BphZ9aIqJVTjTlXgvYXYzKChHiM9/766FK3VKvhM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.34_1562031451679_0.6067746126278069"},"_hasShrinkwrap":false},"5.2.0-alpha.35":{"name":"@storybook/addon-info","version":"5.2.0-alpha.35","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.35","@storybook/client-logger":"5.2.0-alpha.35","@storybook/components":"5.2.0-alpha.35","@storybook/theming":"5.2.0-alpha.35","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"69ae9c7d545e18d782c79b73a6ff3ea613beca75","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.35","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-SyOPiEUcf5f4MMKr04v30WzbyqlppQO//HydQ64zaS8h81T1f1p3TOV3n0SE1rfBIKy4iuepFVI90IuWaNFZCA==","shasum":"0869e1fcb0af120e9bad4d4f659ed4570b2373e9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.35.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdG4XeCRA9TVsSAnZWagAAXQcP/iQGwjnYYuSnLhmSZRI1\n1BbJj5BoPD3qUIJ8PFbiz6Klw6Z6rFYt7ncFvUxCPaYg9XbI2bVh/T0goYfL\nhvoBQN8l+FVXm8SuA+U1XbBXI2Zv3zvwf929q5AokBCgC/BVlksw6LbWE1l4\nZpuXFytLdH25POh4jmgwlhrAmTV8btOQTNiAv2c8XaTeQGlKE3Vy+KLP7U5a\nzq7Hm6/DUgiTFhC53yLHpZJZvpjf5cRpTHftBFs4EUfOp5IWXjjj9hbn7Ob+\nAsSEtrMnTgCV3+dbRJYZeUwIV7QLRUtKJQXCau3ROjnfpLTLohps8kFuq+vK\nqZjys8CMdtDDdRhFzhOE8Y3lWU82T02R7H6djgI6WFciy36WyUTNZk61mgmc\nnbQ591B9yw1O/DcmkRT+oobplHyP1JfwrNo/KRb2uR7TNHW19YaMxsF9XXeC\n98VBJWlF8XMkZJO12ydSDm6EtK0gtX/CAgew/1IJN9RJ4MyAmPOrg54phQKv\n5cgISUiMHjuBCjwt3O2QEIKqC6FNLzxGcULNXRpnQs4iEtKiaL2wqNnJWp41\n3Wj2zl653kmI0AoQNIaozv9pc+8nxtyoR5hNl/u3c3saVklAcl2msNRChXwv\nF1qItBixTZi4Vcv7Aa4D9Jm+6VNeKWXnEsAnmoIxcAmH4wF/6DPgnH2QjJa5\nsGsm\r\n=wP5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVWM99OGYbIwglS/83QHhhaCdTOt4A0OkmzkHaRvd1MgIhANE4jVL0X9XvmRvEB19Xm5OxXuWP/S8SbO8v4Nhtt2ze"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.35_1562084829569_0.139602926742306"},"_hasShrinkwrap":false},"5.2.0-alpha.36":{"name":"@storybook/addon-info","version":"5.2.0-alpha.36","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.36","@storybook/client-logger":"5.2.0-alpha.36","@storybook/components":"5.2.0-alpha.36","@storybook/theming":"5.2.0-alpha.36","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"65db79f6ece38afbc56d28abb37f5eb21c40a5d3","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.36","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-FGzbMfuwCWTleUo2ZhUkw1D5kmj4+mpJVdyrDTIiil9iF8Bl8M518e9CMOhegBxMg5LMeZMQX9VYcypDKvtTGw==","shasum":"3d18c63f8c50f24316b940795323da8cf4af146b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.36.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHyQDCRA9TVsSAnZWagAA/EsP/3cwu7+3cZINb4CugEGn\nrPq6zQ2qBoLgk7HNH5zUlcAQa4WEUpfePYldRaQZ2xrq6x+3fhKmOjlAGIct\nUjI4OX3YtG0T/J2/KTAYbsCD5bpMMF4TUXEJdQPtQwY9V66elxu1+qmHsODu\nAqNScGoNeH1ZFJk3867284wUSTZiq/+L7x646xLX3YzWNQfGT1Rel5mvtqv6\nszOTlzcte5tKszOgTZNqfId+snFUpMZ2f6qnuOGCR/9vhEwSKYx3DBf+cQ4C\nSEF8uoXBbBXVySbxS2lrgFQ2IkZEEIUQ8eQwsULpowji7HxZ0uyZ0BRpAa5b\nVIqtkBoW+wb1FLC3oKYkPxAS4InM/Z1SWm9GgCMi0kYPVw6NwxRsavKmVQlX\n/fOE+7C6V+AAgKjg28AxYAjnTNwW0AcFFyzndu+gOR2OeAfcu9Hx25s1PL0/\nI9ytG4ArFRgqDJ4c0ZXm4YjiRg64hTq9qAJTv0xYrk52HSlTDbWHK/+beSyz\n70/LXkf71qNLshqMDLZSZuhx8W5yXDsY800Q+Jfry2D6HyQ4dqO43RMcHgBb\nR5Di/gFpJy4OUtCqkRMhE1Goj8OE/kQmS/7wAwx2jtZ05ljAYvUlQrzBK9q3\nlyta6fZUs/mt19Pok8ISXODe0dWo4D7WY49rqsEu1rQGA8xvsPDsmDa76cLS\nCHvQ\r\n=SVOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvhgTSu2YX6b6O570jY2wWbKBQDe5miF/9tpZxcBOZ0wIgH3P/lgkDcCDfmyJc4P9cU2YJpUvWORtt6Ta1KkRxeSA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.36_1562321922641_0.5487877056213271"},"_hasShrinkwrap":false},"5.2.0-alpha.37":{"name":"@storybook/addon-info","version":"5.2.0-alpha.37","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.37","@storybook/client-logger":"5.2.0-alpha.37","@storybook/components":"5.2.0-alpha.37","@storybook/theming":"5.2.0-alpha.37","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8d82c6a62b4cb827f759e292f053f2d8cdf428fe","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.37","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-5GkMJIJY5ZnE1FvMpCR97ibMUoyalIWEo3q7q/v4UDW78/eQh20zffD8Rhq35EmcR50TaN37BZ1WaAJMx5LWNw==","shasum":"21c48aca3c81428acd4a8615f19eed91ed44dc00","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.37.tgz","fileCount":108,"unpackedSize":1394721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdIs/8CRA9TVsSAnZWagAAkGAP/A1Rb3SnUaPqv918c/P0\nHRuOalzphFvSdsJlIOeKSx3BxG5mNoDa4oNvN7G9SXikTfZ0o8b8liC2TjQ7\nZAGgWCrzasPLw4irThmc7pEgbl3wSP2EZGW27/pdqiEWPelaKPxB35xUdODk\ncPDqqSmoBMjWCeZi5IFS1/0dXIMlbmOiPy/75JFzJzySxHmrpd93NRJ6yock\n709J9qeNicBz8U9OB37HwHaHRGDK/2FUtattMFm/fy5cPTEEPA7Mzkfm0vxS\ng6hRPYtdfN096ul35kd9L+KIEwomvt0oPk+yDXXCe8lnRP2+sOrWVVp6O5TM\nQu8vo6arIl43jCMKtXMXBkkXnjNQOO4U+6TTqQaqb0f48xS7Xh9JThKm7Bhz\n8qZt859gBOVa6d1/Yxm2IhQ5vk4npG51mavM5qPE5FVS1JQwJWrdQnj/jS9j\nstCu51QU+K/MRc/WrHLU1rzMmqhNsWBKC2q30SMQyrC28n2l0wj8lQ2FnfGc\nu8YxhIusA4Udcz9j+6PZHvHRf3z6uNBqMUIS0lSTDrSrSGp/eiJlZh6RThNj\nf3c0lF0CgCvu+GX979lGGyiyfktzXiewZilvhseHuvCDBPoR+mudXmYecrVl\n415Qafvhox51O94IcQw48JdxGNBrft/dMst77WJDYnc6Po+uJ5svc4tkf6jJ\nJew0\r\n=w9zT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+tnsGMfW1nMvjQq+Ffxj+dN0/tcyngdnLaj2dTTj4EAiBF0GbmPy2Fvxyja3/SogiPbsj1jeXqgUdOpkT4SLXJ/Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.37_1562562555395_0.7316382432939348"},"_hasShrinkwrap":false},"5.2.0-alpha.38":{"name":"@storybook/addon-info","version":"5.2.0-alpha.38","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.38","@storybook/client-logger":"5.2.0-alpha.38","@storybook/components":"5.2.0-alpha.38","@storybook/theming":"5.2.0-alpha.38","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"30078af6de38ce9793a46b1c50a3e378dc70225c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.38","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-VNGf0u0yMr2tphwUaOpSDN1GlD6lpJz6od0kDqAU5FoT7qC4uab9z8bRGmjHdRykasYxE/LF0afDUP6lYKAnZg==","shasum":"ee7d53bd4ce20d6fa958e010fa87dca105b33efe","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.38.tgz","fileCount":108,"unpackedSize":1394761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdI44PCRA9TVsSAnZWagAAQDwP/R4GVUATR/Y4DUGgHwfO\n+Rv1zvI2X02QmMdj+iPenKcsUj1VG1xbVpPgQoidDICUEqvxrvokxcZEEqqu\nE4Xilo1BCgGpbhHfNhdJSsxWCBbbsi69TUZuVNojJWljw1wN4k26iVAp0UPm\nh1Mun+DN/pqYgvoYqJ5We6zQtjGb9C2pGTlOsktr28hKpAvlKx0DIjtYUTM+\nldhVFSBn+nsDSkjKVz5arb3QU2Z39Z5mMiPakOuZcJVfWaal0x2lGFy8NEdD\ny3GSQ/6oMlIHSszgZLGhFRSlxcDRdO0INeDz98tPChl1mqjIqJMJF2GUD7An\nMen3sxr3a5UozXfkajbEbjXdzDrj7npzD3Z7a7F3g9MYl/ppcdUcQtM1OWDi\n6IgJ7joT+urADYfNBUlZIUFsKRvO6tTyvL2bm+6eKn+qLDN5994WGs94FKfj\noXlSmVellfElein1WZ4uZBVKsVMX9EiFVZpRzigntnz4TMMYyIIG55XXgUwL\nF7C6p0L73W4OzndPAGMwPdYxzCsm8ue14PwvBh/7Jtb9pj42TreAVMNLjQeq\nxsriTUllroCN0XAjdvhbjNe0Nw8avVT6dlemTJimW+anyyAc9Ga2fmGvFEMX\nvhCRDw9eEqvi1Tmrbd3HcSwPNisir00SFKZ47FsfTx35q0SkoX4PZyWAM0Op\ndP9x\r\n=MLS1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlP+hNv1dnZ9j3pQB34FsI04Ac4rr0OAG6r1jSngHd5AiAAyMFC8W0xLhXSIv/4TjTem2hF3cbrhXr155TSGdq4JQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.38_1562611214636_0.3057563984891669"},"_hasShrinkwrap":false},"5.2.0-alpha.39":{"name":"@storybook/addon-info","version":"5.2.0-alpha.39","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.39","@storybook/client-logger":"5.2.0-alpha.39","@storybook/components":"5.2.0-alpha.39","@storybook/theming":"5.2.0-alpha.39","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3b17da48003c5b242b3c8505dd01747293fc4cc7","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.39","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-NgzhW+/oHXKWcwFLh6G4Xoe/EI/+8uWvsx2mV6PvfQjPz14yW0g0mGKV6Iikw+u+8uwM/YOvcNA+BjE1ugEzZQ==","shasum":"b3c8e7ae96f41f2a04b4aa8002894ea9df846c66","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.39.tgz","fileCount":90,"unpackedSize":851359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJVHnCRA9TVsSAnZWagAAO2EQAKDqIqtAX/xD+cPznIYv\nwDVyEcpj7e5Up/O+s86qgqYLtxwqPXUsv7fhRQY0+hHCTZpVzypXRSiDZ6wj\nqAHqv2eGxYIpHOhSLRvqIoJA9uy2gjRVipDU7T4N+VcTywmpLmP898MzaYmE\ngBxozro0VUX+lC6bFiqT/QfPmZTHCN7nb2xHZ3/+Kkw7iGjsHIFAduzwdxNm\nSfB/4bT/YbRDg+8vBaG7ZrDCjmB9WTqGBipuJ+KVXdnahpj7UVnH8a9dgCGh\nrjjxw2Gudm8wzXNxOJzGrNzKQvMM9Ytymyr+DFeWNvdTdnWvF7QdR/b3KxSR\nQiMdWbnu1+uRV3KsgAwmgFIF8eT5TjeXlCEQqLn1Brc3tj5Xqqo6qscb0Iaf\ny3GWiY0AoQq4iicsUcknMJ5AJd4lnhgrN0kRurThGMW3M/lm4ZYYktUVi7V4\niEsKjMDDsveLDhUW1C7ahbzOzCyA4NY3PfS3kaFOSK18kad/74m+d9aBeTwn\n4ILZB8OaUS4wtIWA6FV8wzUkR+dfmwWesGPG+4lpRR5s0Bku9ErOrd7qbb2D\nQueZv1P8HXYCD00YpMfNwp5Yz+ZIuNTcAdME4YALZEt1XdpDtb9UEiOExR4J\nditYPn5a+4xCEOgvwJj+8yt0/0Zuk5s1h0ECpaJ7v6Q+pAY7wFfWTewnENpL\nTor0\r\n=uRd7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR7FDEMWbXX4AJ7b4PoX9RQ/zO2wnqSlyy2IoihFiAoQIgQ3N8jFxJHqqDNIQ0oVlShdFIUN7nlzzB4vjmhA1tldA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.39_1562726886410_0.8935069393504655"},"_hasShrinkwrap":false},"5.2.0-alpha.40":{"name":"@storybook/addon-info","version":"5.2.0-alpha.40","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.40","@storybook/client-logger":"5.2.0-alpha.40","@storybook/components":"5.2.0-alpha.40","@storybook/theming":"5.2.0-alpha.40","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c41dafcbfe4d4e87ce6f6663bae2093078d2ef87","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.40","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-FKSrAO5WrC6yyv5+9o3wc+zbtjmXieCcTemfCAxrV974hEg3IlWuTx725jZuer8/DT9mlDkwv5/cSJYeC594Sw==","shasum":"c981e5af08f15050d1f7ad23b1d41576f42e58e6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.40.tgz","fileCount":90,"unpackedSize":851359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJeVzCRA9TVsSAnZWagAAbtgP/jrL03ISroMvXVmiJ1Fu\nOoqHf6wVdVKJPqMNzrQsfYrHD9530aDp+xkmxLIW/ZE9VpX/YCrdQTiX3rOw\nvJvFn1oqBtAKTi7ICLiPmCmm1nEuUzP4tW5fFe3oyUGc7M8KriszSG4WzY0g\naW8G7NhHqqC6kMVjK2z53WD2e+zLHFaz/c62fyg//+l6RbPO+zQCWVF2NxH0\nZ/XB+ZxvNV4ZrQpc/d0ccIzb2VcNr6OUohb8i9h5HOfep+QUAwcxfIAF07od\nKpuJtC/xvFN6f0Ku1R6RRDWj39WroLoXmOHmb7b+HfZ6ofZzPzDw3vdfMpIL\nszCKOotoa4j6TupHWRMjKo9vavzOKLuWOTWFABlzAR02Y0nLAIDZITkoxYqY\n+ODxWyr8keri9ij1qIk5gp7rJI//PUIJ2M0E6HnKqQ/4BCC+TVgmMmP/WOl8\nlx4tcj3cuWtzJ9xJVcLXDdFxhYWloVIdhIEzi3S3fT08lExq1KM2Uz/dBcf1\ntgZRUcR0dVEaPUBTGE3WH1cOxQTLfgoXMF+OZI4lTcGjL0qwjqMYPA4S6SE9\ndGXLgbFBe+7dxta/f4K922qVduoEgyUwMWz9smH/7kPPtQ2ldvTSDmcaZohk\nOR8MnoEZOnO1HQL05k2JLmNTKCOKJWrjYdc0zn4a6gYkkPlWq/XEQqrhyFGe\n+isR\r\n=D/zh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCVK8d82yxCjLTktNrSayIGCZMD/6YSawCa6/OZvrtgAiEAxlxyK74B5qQq1yafR39n8TcwziKCBr9kyyxWFFriDQg="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.40_1562764658955_0.9113570163809193"},"_hasShrinkwrap":false},"5.2.0-alpha.41":{"name":"@storybook/addon-info","version":"5.2.0-alpha.41","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.41","@storybook/client-logger":"5.2.0-alpha.41","@storybook/components":"5.2.0-alpha.41","@storybook/theming":"5.2.0-alpha.41","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9b21aea75b615a4673a14b3ad2963d0fc924eb9a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.41","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Kbdxm8xdalAsIP6/RjmdH1YKKPzJd03iK/RMgTAMpEusoIGpDR5kjMEAuqjTagiL0XvTAHS0tBow5TbQ3yF5PQ==","shasum":"bd1ee7624c186516fb7594f294b01ea4bd8c1d2c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.41.tgz","fileCount":90,"unpackedSize":851359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJn17CRA9TVsSAnZWagAAgbIQAJN8Qh3NUtZ6/bwCwZqY\nkQcOvM2EKBi9VXEL4FkMOdlk8tfa7rnM4zqT6wtOsYdCICqurIDBaOwWcIqY\nHImeqvflsO5g2Ay+Q0jDvp6sJiJEY8c0IxZAJjiFEoozUHAaBWA68UW1zD8g\ng85FX2t4jdgsg/6XvWK1B9VlOo+N14R6tGBmVxR9QhNl4I5miBFCqte9rmol\nwFdN782iRBY9m07mnP5asXXC7rm3j3HISkLCMf+s0VpTmXruGxFOW/A+b0hU\nKXQ1f5e5nuW28v6lMyQkSo+4Vnmyu+FvP91NIB3q6LELRPKt+wlmfiu5MwKb\n31JXC6c2o0GIEfdqUr5p4Lub4wEHb6q/nRGEXoQJdwwXYq5MXpG4dPn1mZHl\ndfE7xJnrBLfyodursvRj/+E0GbhZ5+FobxdtrrwKNtDBg7KIIqsSZlNEZSek\npaojLrCQ7KkIm25Pyu9fl5P2NSMUcyQozEbgqVXd4zE6jfQdCyhWWszMKIVG\nE4hGCLyohbZ3z7YAW4DgmY68grVUIs0JVIIUm/N0EhyZmem9iVDv6MvBHoJQ\nhCpTAXGvi1U2Q0QfeeFyPe2o72bKme9OQ/6uySGs/KNqgcIb5ZG145UFRJqg\n2VLE8Cv5jiRn47hSJwUDlAkqiXD970Vbuu79NzWptZ5Zf6J28PrnaHcnCGvi\n9WLJ\r\n=Ta6O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCH+HQscBoFqVoy//Zba2dV1NYzGsxNlpMo4tRFYc/LQIhAKTajEpwgA8jG/4Ygrquu8rIP9bqbzpFcflv1dhu54Hr"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.41_1562803578926_0.8780336516218712"},"_hasShrinkwrap":false},"5.2.0-alpha.42":{"name":"@storybook/addon-info","version":"5.2.0-alpha.42","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.42","@storybook/client-logger":"5.2.0-alpha.42","@storybook/components":"5.2.0-alpha.42","@storybook/theming":"5.2.0-alpha.42","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b6ae7280391f1d2648b6a530dc1c8629bd0ae51a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.42","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-RM1wVo+u0KpnCrdFIEBry7ji/7ENv3fbkE0XQIaXR2vCTQvT/QcIwgL1mChxllpDkILskwARJVik/k2Tbb59BA==","shasum":"d536c19ac8fa309ff2021ec48120690fe83455a2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.42.tgz","fileCount":90,"unpackedSize":851359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKAFwCRA9TVsSAnZWagAA/N0QAIAvcfOjqv++6sAktAaC\nzst8VSXACjUCho95L4LgvPNSmfUAZFtvT78NcZhRgVETaA/rORTD9Fk7TpXE\nHP90OIsvOFCnE87GXEqKQvQACFtDrNUMFztCJkTSn8eVmiYpIZLpLXpIdr3H\n29h61ao7AZWQKzQ8lCkWz36f68qPXwajZtQCMG/dcET9/gqWX8asr5iawlBP\nI2eA3PhJOur3yO32QCuIuLKWBvVFyvpfXKVDrU9BzEmKS0PHM5EnNvstHD+v\nFMEUidlDv1ap/jOQrPp5/88P4Oszh9CRPrLcX+OmakHea6o+fAdMgy4GzzwB\ndoHUO//lN8IaDM1VLd079qkh70yJemNz0eeMKoVS4uVyO0Xqq7b4p//c9kIU\nmSR98XgHj5COilE9/guBMVCh3xcmSIk6iThdCCelx51G5ZV0vde+QsThcBpm\n2IExHTQRFmFB3C+BrGF+sqoMLV/XaxwOwrX9xvUnpfOzsblRl0wbLdZv0PcF\nktUr+xnmNx0KBkGg6/uoFTC/imxbHvlW0lqfWMgnqlPQe1aw8T4YCoqR9od2\nx1hYKJdYzhD/2xCSKlP1CIr5VxtyuK1YpB1fxt4G7ZZvyshYnWqP5/vZ001P\ntfsgWnKaLMSwWBoa/CcnUc/VjO0fbEVVb0+gp1rIVA9R+d9HLdF8BKgdemo0\n1AJE\r\n=6Mv3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0P/trzPXMo1Gh7V9T0SJyl66ngGPmYt4R0VtN90R1UAiAMLlyNA4LMzdv2tTdK7/xLkDGN2W6/TVlEOSSBtbUdvg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.42_1562902896056_0.8371054316805984"},"_hasShrinkwrap":false},"5.2.0-alpha.43":{"name":"@storybook/addon-info","version":"5.2.0-alpha.43","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.43","@storybook/client-logger":"5.2.0-alpha.43","@storybook/components":"5.2.0-alpha.43","@storybook/theming":"5.2.0-alpha.43","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2cbb9614f1bf8ac711ab2d8155d6f12befe8bdda","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.43","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-UYFh+8S+SFIZNWOHTnGxR+IrDM04xemYzN5qqONGwYCNquVge7anlAKwv3hcBMXj1pmgqQqLwBIKI5lVK3QSrg==","shasum":"1c17facfce626be62d54e5345fb12fb954756caf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.43.tgz","fileCount":90,"unpackedSize":851359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKeLDCRA9TVsSAnZWagAAWbUQAJWC0PsKs5a90E+mBeQq\naTlII32NpGkPEwJohxGnt3ppgS/JuIM1513aBnU+VZwSFxT9o7DGD0JYebzl\nB2NAnoWRU2VASTiY+wYyMQfuem2ts8hUA3o0Iz/LOqj/Xlzw6zZmsg+Y8AQ/\nOnWMYE+YVY6xMPZUKwPEJqyxzwhpTaGnZwM41Q+huId9iEVP2bK9Kvj1LIGK\nUpeEqNPwhFiEC7UJRoaVLkgC5WMgcXSpH2JZTqUjZEqSjY1+27o4uZ2cCjuR\nkkBeBzU6G4y9HgT0I1a1vFtxbK+QzpaYKgcGkI6OeWTOOoQubP+iXPZIT+nJ\nmzqbWOqmyqfLke+nZjsFCPfTOTe3OEo/GViedPTxasTGePZp8f8vkHcxUXlz\nl5g/0UBum6BkLYOLI1lBaL/o/M7scdGFIrIM+0kE9YjBo9chDYLUszNz43Y0\nj/1z0myV1QXNB5//fxY1hkt+QZrZQJktvRiiQ6keAFP7n/ZKSQ8DaBjejaWk\n2pXn0+rUU7lOjjVz9Jvh/xxH1wCYTV+NbHEcyNSqW3QvjL2ah2PxpRbscJ7c\nfWQN6EW4xcxu1uIIs8gmwOGhicwv0OCrOI3uNbVIih7tEBlC22aACXWB+2G/\nO3otH/NSnAebXM4HktpkKdkpDrdeSxZyrjKx7Hnq/lYOCN/6vSgpfRLE5C7+\nUOMI\r\n=6O1a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4SuMRhKtQr//FqrLOhsY4qkK3eUO46b9jAGQhruUQ/AiEAnjBciGIoYW04z4w6fWhpgQJmSUBLN5aCCoBo2RF63nA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.43_1563026115143_0.17718526675516766"},"_hasShrinkwrap":false},"5.2.0-alpha.44":{"name":"@storybook/addon-info","version":"5.2.0-alpha.44","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-alpha.44","@storybook/client-logger":"5.2.0-alpha.44","@storybook/components":"5.2.0-alpha.44","@storybook/theming":"5.2.0-alpha.44","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f3487c68e4d171d88c9ea66fc76802279ef75dc4","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-alpha.44","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-051qDfjZIhQSF+iUocbf3FxgX3imZgI3meJVHJ6z5Cvs1fBxkS6G+2dy9lLAtUdVYvaUvBc0SBPz8tJXGU1roA==","shasum":"05a7fd631e2d5b4c92de0dbdf411d515164397bc","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-alpha.44.tgz","fileCount":90,"unpackedSize":851359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdK9ikCRA9TVsSAnZWagAAqvAQAJmiBHg/wYRWBmiUrJ20\nSLbvjN1GJy/zscwcNXlRdQKBBdsLievP/pSon48ndnRd9YxYnbHVSWevTqxU\nBj1plt6liN4dG+941AYrM26Nxa0ylUYE9cswa9sZ8BaJqLv3VSxM4nKhpYeU\nosyNgZo9U/UJ1NgYVk4JgCmv55gpfmRItCh6Rp2tqdVaohzPE09UoZnUpS6S\nkRcHPOJIrAUmfoqFw8O/kGU87Cq7QSXXG1wSW69i5iiixNdlOOiBO9ThHb7o\nXJnDmu/s9YuFhdIrnX755Su8MtMSFgbB3ngd82/uLRnZLOBksiu/67UagU8+\n44lk2S+vGnLJRyBURg5mgFSHY1lc9DYVlujFtF9mw00XajPMKy/E3N3mPX9I\n5BYC4GRIscwk402jRCwkUKxKywzWZz4/+NIp5C0Ti9htdy/xH9denx48fJM5\nE2NIzFTCIOMusOvGxaD6G/oS1h5wip2fGK/NJ8F8xTkc8X1Yf/0hx5IPgj8Q\n6zYEi7CDk9ihIGbfxQNLud1BluhJQXMMpVaLqnhIfKowFnVtp7io/x4WSOps\nlRDORkgrtGTVwco3EV0hVl3p1qExr4d0Jf3MzOt65M+A8BKMvjL3JpvJm8bN\n1w/NaFX0ehfiyN9QG0XrDBv/WkVwfOzcOnJrNxM0JPr+FUqvsE0tvUv51aA5\nYCBt\r\n=OebE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlPhkWxNvpMtOKMkji4ckiA+EwB2RxAVEfU0FDtkQhwAiEArjbugJT9y2UB53OnlZf6GsFPVduX9iOUFeq9cFO/EWA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-alpha.44_1563154595900_0.6576401384816493"},"_hasShrinkwrap":false},"5.2.0-beta.0":{"name":"@storybook/addon-info","version":"5.2.0-beta.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.0","@storybook/client-logger":"5.2.0-beta.0","@storybook/components":"5.2.0-beta.0","@storybook/theming":"5.2.0-beta.0","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fbf724f2a1efac7a33e66713fbec1c9a6af0a7e6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-8PbrZhZyjN0aKrYZSKHa1IlBX5W76FdeIhMb5w94Fz7jIs9b88TO9/ps9xN+rOueTSHjS1EHZDWW2tZkO4Vxxg==","shasum":"86ccb50cd3d6612f419f5d965037dcc836bbd3b6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.0.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLHewCRA9TVsSAnZWagAA5PQQAJfAnu44xHkxXmB6C3cp\nLUl2hehGFpqRv4+kkWU8ypMpluqxAQS8Y4NSPeGCgQQVMOPJ7xV4Hs/IizqL\n3H7E9La5xyYRnDVK+ewz94muM9bQWx2rFA+ZTXbSZNkQFadXIXZh2M/UQL7u\nylMtBOSPLsyiuxPldK3Q8/tCIvIJ2HeE3sZt+rCirQwqTMT5zxOVWSlIhgzC\nmSnyp11LRELguy75cict0QC4bFzFYXOYgq8CVoEdn0CXo6rNxW/fITOyT0Rt\niQuPOEUWahBc33U/6QREjSESyeBzeyUGE1/iw8mUtraOmXW7NIOyv2bNJoZF\nUVKjYRMMWSMctRPRxXRxpxQ0cAHt3c1hbu3iRxwXIapZqeJnDlOxyDjN2hmT\neMHxf/m12yj8u9z4PlAc5fZB9tN/QRzt7/n+wHZnipRXtCmTjtMxkk3W/ruh\nch8YIW8owP0enHEXbZrKEVnzqVLEEXeuRKRA+xZPMrAl3m4jOu5ui8CHbusn\niainsjdMR5jIbciS4ugfiUbSasjHndsjOlq3KakF/o76deTJUJlOXLj7YfmC\nNAI8uxABIdRqiYyNuXjk92X5ZcUiozHfMHsLA6HtAp3BgQoT+h1vuRDcBubx\ngMRajtQ6naPNrWAts/bIDSgWzi2xEaGrCfPJQMNWQaJCWz6/B1Cmjf1c8Arw\ncOwA\r\n=ldL2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIS7CeuFbRjJ8sgY1W/w+yDVhACASq4LFPhJMq3xSj/AiAr/jCW1jrEm3zIqYoQQPnswlm1RB9aNS2uIrgRzj+xgA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.0_1563195311901_0.4053763923759848"},"_hasShrinkwrap":false},"5.2.0-beta.1":{"name":"@storybook/addon-info","version":"5.2.0-beta.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.1","@storybook/client-logger":"5.2.0-beta.1","@storybook/components":"5.2.0-beta.1","@storybook/theming":"5.2.0-beta.1","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"cec7d5c2825c520d4fbd6a31d7f5ceb54d84150e","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.1","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-qJmy7+wuiStPMBe3hcpCL+2c0T1h4Xz0ltDKrIXsiPvLNbtAcPvRrnd9K+vK8pXaZSe9Mx0nsuSdY4WBwggSdA==","shasum":"73b472aa87585bc89ce74e169a9be49f2e62bc2e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.1.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdL9XpCRA9TVsSAnZWagAAb5YQAI2ygZ4HTd6ei2pLDLFR\noxMkxYAldN8dqAfbUWCup24LbaCBSYAaCJnyunLVoXOKnGs74m2P5dxunqw4\nLiA58MaEX9VnSgY/ZR+W72Y1mAsboaAX0hiwUJ2RUtUcUCGylDeNKb61oUhV\ndJyTV9D0VqNUqaUyjVdyTGPGAkIL1e/cZVEmoYpxo/BLUC8TXPekB4lieoJq\ncaghz4SQmkv62aDi4rRf5+CdYe9UnBA7Z1VXQZxPGGHxdkYSuW3zGDhNhu2w\nz9Q6odA2mxi1x1Cgvi34K2+vMYFwQp5JX4e5G61nnuG4b/mvyJCVLtmPlisG\nV+y9y7UKuvQ0N7oFO2UGjYEVSwkm3ss4ccAJj1JT3QBGw+sMSKu6bj12Oi9M\noKAw1Mm2xJNOoHY1t3kyMpBTU47rbboYqd1wW7SVcwy54H0MDyC6Soy2hbU+\nO7OpbrnyPaTVPHSiK0Wr5tYMMK+kujC64E3WENY5lJCFh1ue/EX0rv4EfWHl\nhoWFSW32ZR1a7o93LEBe5OI//4+7CDIjk4Hzw4/k26c08L2dBGkX/Yf0vQOU\nmM8MHZNSQKyB+nYJFpLafNAgHTMUzrabDhKyh4q0wcBqg9Tp5+h29oJv/yP0\nD/aY9EVQXlQQKeW9SPgXsBEFZZXrkB4dGT6Vr+MEu23YOH8+1lrwPqyOakOM\nkfrT\r\n=wfTf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWyUHiaCl+zyUbXmVhnyQ3IfOtuIhMcQuFq2bkb7c/PAiEAht9yuQ2HFH5Q43NJE5NHB0id0wRFLdxJRmnE3RO+ilo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.1_1563416040524_0.6056290573557332"},"_hasShrinkwrap":false},"5.2.0-beta.2":{"name":"@storybook/addon-info","version":"5.2.0-beta.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.2","@storybook/client-logger":"5.2.0-beta.2","@storybook/components":"5.2.0-beta.2","@storybook/theming":"5.2.0-beta.2","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d597cdd048644c70c05c9c00bf0a999dc1f5b545","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.2","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-y8NHdjHYwG5p2F5tl6CLeK+hmC4NfFGoG+/XNNYpSzjuT4O+jztJVtdf3EEBCj8pu2uhMcUC4t4EBNiZntnuVA==","shasum":"b670e2582ad814f57cef149ee763993ffb24b9c1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.2.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMIFjCRA9TVsSAnZWagAAEisQAIhFVNA4+5+hYZy3Wj9F\nHYJQJz/dEsHA1eC2zypU/2dZQznP6MNsmip3iJdXWxrmTPj4RGTZP4FhLfi2\nPK0Klr2eM3lSbejCdHkIb3tWumDv5bffZOCsrf2TY3AL+9QgJxvS3HLLcZ2F\noIW0qjKzBFUTlPN2N9Rn1OR/0LDCDrf/TmEI0poArLns2GA2GkzHJssv+rd7\n3HAVqBuPrSK3AS9e1WIuiqVtsECNlYQs16ULW8lKxSEkLEKg1vfc+b4aFsQA\n6Y01uDb7PivHDHNiibMd3jOf9LZFAcPTClh16NhRPjpWyHTbhZFNaWDPZZ1I\n2r8981tUAurprqIeuEmV5cV/8TvjhO7PS11XgjvUgpMARWjJUi6IHv1ZeMBV\n2GyQJqtfeC+RMGj5/fE+fhdo0x0vZiaKZINEO4g0ki9EiktsQBBIiaMznHa8\nrgDc+Vd4HpQsR03qmm/5j8tO9o2hIO38A0vQmcfs1k0S/BBlg82y+9cbUihM\njdy3HKaTYphInudnnSczKhiF+6Jilamr+PDO8kjMtW3pFfTJZwGlTRExKpPz\nw7TjEp57iSJXkTZ7janeUFOEyGOsG5qdiuhBAFw8uUNJL/usooXflgVe9Nzj\nSXWSG9eNJLjUTXhU0QSPZ3+95gLvHt47dcsBMtirswKBuCp9UqmzMA/yP3qX\nMcJg\r\n=CNJY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDclaSMBU6SXTPXoKwYJdE+AizzwA0tbB9KVmYcA3rWAwIhAMhUOWS/gVJVmVSpSzuZipyg5NKs4+f2cmjY5lL4vgAf"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.2_1563459939228_0.08552545282950952"},"_hasShrinkwrap":false},"5.2.0-beta.3":{"name":"@storybook/addon-info","version":"5.2.0-beta.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.3","@storybook/client-logger":"5.2.0-beta.3","@storybook/components":"5.2.0-beta.3","@storybook/theming":"5.2.0-beta.3","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e788841935adb431c9b9acc2b23ebf6410aadfb7","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.3","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-axmKZpNvmFjEJ3PUp9EVK7b5w/A1iNJevPQxyykNRboWG31R/4Uu4ysD1tShvtgj+4Wf97I6uX0cbtOHrAxBUQ==","shasum":"8a3ca7b99e7599e2245e0864802b73338677d76c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.3.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMbX5CRA9TVsSAnZWagAAm44P/0awZs0eJbi9KGu9mzqM\nMI+NcpR11ZuSh7GF65HPqsWg/2nhVc2Wi/B2yeL2IEIEV9AFR4p0q4oE3V6c\nAlcAzCeYKO3xktbxKFywKutkDNOGWQp3NcZ//JaAm3PqU5J5wu516txj2puX\nrDHjFru+WKeiRXqCQ3KBXtwVN9zlXj5pKqE3tN4HKzci2b9s7Y/llJFBtPDC\nPMvQf9xfwDM0k9zoAR4qNZXCTeLLpAStVSLPIbFrQtVpEX1tsFRggsXZ1sYr\nFywjAXue9y0lvtwbYcNbnReCIFEWo31BPDharVtl53z+e8U+Hggx+8kOZqOi\n1ko1dhvt8iMK8Ay63GTlmNY2z+8SVaTzBXdh/IrK+MOZTMTv9sxGKq1J+0OQ\n8IM2XUofQ8gj+aDsZRkcRlZpswXM/ZEcEy1B1lSn/bWBCBp7MjXPEKk/QFqf\nzk1SGVLNWQ/TxWBa5Xl1vcM64X7b58TR4H2Yvu9D+JWKnk3sQNe8/TXGJpGT\nskgUJ4s8BwnCFFM9LMOHNyqUn9JhjcQG26ITY4Dh75ELpWRh3DvJyxHJUZ6a\nxAZUCOxBH86zYrdvOOt6DdTATs9yIbxJB8v64nng/JreIXiBhY5E96I24WeG\nCCX7Q8442gdU8eHuU+zCb+v4Yqys53KvAeRPyMZvH5zl8xnPNkRjS3NbNlNb\nGgvk\r\n=mF+V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHPdfXcrRnkATOoBTppVhZBKkP6YXrZ+mvlJSz6JyyTAiEAyWCDg1i3FTSt0NNLQaVnK0WRV3nQzWYDT26yXGlRKDk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.3_1563538937098_0.3929213071510669"},"_hasShrinkwrap":false},"5.2.0-beta.4":{"name":"@storybook/addon-info","version":"5.2.0-beta.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.4","@storybook/client-logger":"5.2.0-beta.4","@storybook/components":"5.2.0-beta.4","@storybook/theming":"5.2.0-beta.4","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"bd77e15c32f641b4bd40f430d5b928db594c7696","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.4","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-EIVLNf6R97FCFn05kgjO19XXZ5s7Ykxfo9VhaBvoQQTyIWMhHsvPejP7esAiPN7UpGjBPmwO0KGt0Gniss7s4w==","shasum":"289522c9ea9ec8f139787fff78f8f308f6da1eba","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.4.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMpxzCRA9TVsSAnZWagAA3vUP/RWfZtxK+UbUb/sYTS9O\nnJt/aixa8GO09kRRAPn6INJCrihjZCI9ZGLhWEfOYj7A7ov6eWVop/o3LUqI\niB3jlmVYwZcPNKf2Qr7aDEuKx/LONAbDOELn52bEv1MfFGV1c9V8Gyd7mlOa\nfZCHZouVKGueVvDjiWTCWb+57zgCQ0nZjFZWoaXSnsnFBoTnpCJyc+itKxWC\nUqpWTCDVDSMKpvGovzKeXp2kzyB0Hlaycx7vFXf2N9SZofXp7RYBoFJdteje\nGtFZgKupV0nHf/vFG+PH1j2itES09mEJe38xMWLrKa/IN99xy717zDN0Yvf8\n5JIgrH6x+Rt71K8s7vTvPIowfDkr7nluLXjLnikVS4Q6Dhznunfx2kXapgoh\na+Fo4pjWE4bZzVjinhHjrNMhwlxViR0RNwbL/qNBvwMQQpdk+M4eWXb2Hx8b\nrNvZT5jqiNWKSv4Udm4gL550mmZMz7DOedhGgBXv7YpspgQT1sKQBw7qzRmG\nYbientyKVo6JzD7oN6cjc5dAT6CuVosxkDjNFs/aYqqhxGedCxQdtJWkolQd\nyDg4liLCLWs++i+zwCdwyL2n+dOzOVEjyHayOo5rVPQV1mLNTRixfOgKbDDM\ncEliQDWKQxzhoV6X7PCZBPNdNFI/xr3CBdS1ayQ9dKROoxfa11roZHenNTK6\nGTSe\r\n=ZD6I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2XgjN02TKEzzJAwdVirmiJzIgm8uSfYfaPgKhd4FKBAIgXhaDCb73vJHFRO3Bk49zogKdRTtuUfQzxJO4VlU1R1U="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.4_1563597939191_0.7244955037448688"},"_hasShrinkwrap":false},"5.2.0-beta.5":{"name":"@storybook/addon-info","version":"5.2.0-beta.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.5","@storybook/client-logger":"5.2.0-beta.5","@storybook/components":"5.2.0-beta.5","@storybook/theming":"5.2.0-beta.5","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ac9176fd4fd9df7d4c9aa3b165e73723bd603553","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.5","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-adeYrbt8UVAnFZ6Kq+SIP5mAwF3EQIpi4Ccx3Sa/BhaFtQfkP3HocmjzEkkrvRN8ZpCkPOeRVOUc8Wh+C2fRrg==","shasum":"0cd5afc2042484668a4246e0eb661f9c5281afed","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.5.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdM8f+CRA9TVsSAnZWagAAQy8P/1uqfovZub7IJeVmrJdQ\nH9TBlHModypKink8QBQaxUuqQRi0BpWrpDzMEYExos7YR1Jn+C3/f0siJPDK\nfRYSRDar9VS82eazoamzFWmauE9GKgKOuER55GkWDtAQk8ODL6es9pRsiPul\nL7hZUbtzVeKqcmgpFJ3k7lsw8gwmilXKCh3rkEuK+a0XKlYti/RPQnSem8Av\ncV4o6N+5K+SD1EPXAazWQNBgxFbTq7avaYLDoMd0LcTOBpxvheFCHP14xVtH\nU4oW4qId1evlX2BQhGXbTpQbUGiMb8Y/WtsSqwLSpyhNKkTM3HpM38vsqDMV\nmTQ/EjnvhKUfVKhb0P/+j9Z3GXwvM/MX2CMySBpMeNTjzpMdzKe2tXJPsCVh\nwLTYkk3bPHBrLuqeso9jyeFHnyf72gSWNhnnYKutW+3QoVwzUy4KlZsrxK3V\nGpW6GWswaG06eFuSCuHScodscC4ipGU25F/F/ERHFr9jrNxHVblKLeBnOyjW\n7FHyUaNHHw6x9nLJeRtcDzup94CN59nt09u43PZaKyqoL9QHzjbf3APBTdjX\nzzbyaQLPpt5os6Bx4wAhjcI/4Imu+5J1cAhdpueTgzTUWtmCEHytF/Yx+CDH\n0Tw0CPMOOh1zYvhTMFF+vY71CtV+3sHc6yRSt5/XsT6mRpbuQAkqdAIE9953\nyWwm\r\n=jLxM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWHG7Eh3pY2zsbat07BZyH5g7xb0VAy38Cfwpc40pB0gIgM1fuuaapgKLBntMUDo/XMKtUpIbYNHtsBdIThguanhw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.5_1563674622256_0.45656315980991735"},"_hasShrinkwrap":false},"5.2.0-beta.6":{"name":"@storybook/addon-info","version":"5.2.0-beta.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.6","@storybook/client-logger":"5.2.0-beta.6","@storybook/components":"5.2.0-beta.6","@storybook/theming":"5.2.0-beta.6","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6853a5b95ae9145c52ccf9241d7738283b2f7eff","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.6","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-rEx/XKbk/UJ1OWOYhwBCeD4pc/L+hJNUNDTrDfn+Is08tUNPCmo+nI2mGSW/CoNnmBtolIJ/ZKgG9Rcd+on9xg==","shasum":"69b0dc1ed0b715f536536fdee50867ec8a6c644e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.6.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNfvVCRA9TVsSAnZWagAA5iAP/A+BeVJ3kZwgCuefHRIs\nrLlT7P8cu7XSmq506HAaPL4HruJciDttdda//iaJoxJOkRJGMv5wRUHfrzwS\nsdHKFL10BNcuYwv0mrBo3ezOE3JoEr/QEKy8lrPn2yxH1UMnt4e5hZ62xbSV\n/Ga4K6NUr8NEG5mpUw2cksPir5zNPl+kjz++J7nP38zw9jI2MmDj0oiZuR79\n3pc3WNKQqy9B0kpJ1nj6Voa9yRcxzyJbHclAf+2+92l8pJeNYxE1y3uwDROY\n/w8JtRRZjplMJ/r7YeW4HcleBb1AFTMqgBpwaNljj3ILdQ1fEa5OjUR/4pO8\ndWz+QzQ5cQicsz2MMr2aZejbPB75cLr9OMp9HRwX6G0l6pkOhLL/6WFrDrTl\ntzXGUJ0S3LBm4XBh1W9tr7MKgVhq3N4177pH7WmVOn4F9aMdSqDsVwZyQHfH\nDkGaL2M/3PKAN/D4qtb/xoYD7hK+DOHM+YHXTYVE6VfhfLhXl52EomTpKaPJ\nMJsV4LZUj59RO45H1mBAT/pYGYeH13Y2KAip+j9L96YpqMx/byJrPbntdwJC\nu7yzylmsv9OcBn87r30MRQzxdSAUpNLho3njb1Qo1q7a+vbrHYiinzpVlYO0\nqsQMB5gtADVBTq6jgj0O06Wb1G+scpkUUrPTgWneEVqEMFX3rg8yLueHSIYy\nOzw0\r\n=VRQ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJdTITJV7AH7PnrKy7e1eZ/D54bCAphVx69CKul2JVTAiEA6sKn6XTtVThBez9zFVTujs0IZXzoh0E6/nJ3RaGpuo8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.6_1563818963996_0.923436737934501"},"_hasShrinkwrap":false},"5.2.0-beta.7":{"name":"@storybook/addon-info","version":"5.2.0-beta.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.7","@storybook/client-logger":"5.2.0-beta.7","@storybook/components":"5.2.0-beta.7","@storybook/theming":"5.2.0-beta.7","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0232df78f63549ed94e4809517d23def69ec419d","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.7","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-IgWt8I20mmUcHFI2x0LqVmKmNyUqWrvRM/j4DoXZMlVJO3/DU/ebHO+hP2QKXLFAThcMdUBNJXi+hk4sXURU+g==","shasum":"2bcbf8d1c29821d166279fbcffbab4a6b6469ee9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.7.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNtqZCRA9TVsSAnZWagAA0KoQAIj1k9mldLYvrJrQW+3b\nNIGoFMH+J7Ce3Lh737RuF4dnAneIfkREcnM83FHjutEkw0HifFcdtFduT0Ns\npTZ7XEN6CVPVx41Wwz1of13IPm3bdWpLdDMQj7oqQhwyPBuJ1PW1qxeY6eOa\nRLpTufUbQMM1slyHTKnTEG1QrhpLSVmMCtXSGu+Pgg/5TAi50AHT/bAlPrfd\nUb5loqv0EaiwPwH9+UxRt1m+bXXMQ35cfm507rMozyCESLrViohRasodLFFP\noNWihhXNX+0EUQh0tj1z55CPSB1E/pxirkNOC7d7K4spRu48mKWLvlSPBPPo\nAnDt0vfC6rWGy6Du4thBjwOoCBOaZLmFppBwV59Dfou+6mIpNNRPiVQUK4rV\nnPc8ppiE4izzZKS2BcwVAuL4ELuM9FEr13OCVS7UnLRqD+3urK/0HWCwHzDy\nf8IydrsVPzlOw8ZaxfmoCWIgteKWZJvhGJyRlcyV+O7nSx908aK9Gn0NEJrL\nkfIR8XJxOzBT2SaJO65FujiQbxK8/nE+eo6DOIJQkdgamRoAAC+q/ZSixueJ\nMDZPXvd+3l5icA/5+5dKpAjL8Rrt3hmtv7V1SCAcpkcTU99TjWanbT9BM1AQ\n5Bno6FDz6hRpWhENcgeB9oH58qcJII7aTpp02EcpLpYUUmX7E+9BD0FMSw/G\n+vB5\r\n=lRGt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsGHswXJd+x8pN4sShueLvvZ3Oojp6eYLfM18V3db5bAiBfolwk8Z3LrCza1tLNqZXJOrj/Tn3q1bln6bya6PKBbg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.7_1563875992665_0.8928888192350581"},"_hasShrinkwrap":false},"5.2.0-beta.8":{"name":"@storybook/addon-info","version":"5.2.0-beta.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.8","@storybook/client-logger":"5.2.0-beta.8","@storybook/components":"5.2.0-beta.8","@storybook/theming":"5.2.0-beta.8","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a4dd95bb3727b0ecea0cb575aee5914c94231214","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.8","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-tlvE0rtJ7e/jUeAIwz7ZR+jI8qpUNQxPpPruq8ncVqUBmVnxVToCZP6+OxW2v3rCajzZ/xMy036IwVgktIDVcQ==","shasum":"59f11bc15259914a147cb601e1539b61e4109e73","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.8.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOYO2CRA9TVsSAnZWagAA2C0P/Rj/s21xDYwgcuo0S77W\n2IdV1Y6Yzzrnd9+4wd5YNej2sHifVt+VPotZPoIUHFSWn/EwwNacgQ8S1lez\nlJutYbEC3cW81CN/tgmpK62FWcT8HI2jaejjlFeh2du5Nhw3WSRNyHquZLTV\nz6t4flAvfCYuNooDv0+nxeSA5xUm6Lhuxq/KloioPvxr7i83jcUf/NkPgsSw\n++lhC3uNNVClgVdI5irR7hdIGHVqcQ3vCDwZpA+4INvzzD1NZD3nvjAFW9Fu\nIyP298aSGbvN/KYFfSHhZ7k/u5FVgMjHj1Q7wipZXMqC/Qozm51KPBS5zErS\nw81zNnkoJty6cCjb41lIr2yHmYCTxAuYWWLIemHUvtaLT4dPQPquFAqiKiiO\n6DYVDxoX9dqr/B7lY0GpuGfZySFv2UJmi775gvnv4JLvyXqo7KY3gfWt0N7y\nVmvXM8r4trd+RMb/s7rayBmlEJwIxVmZbSBpd8QRJz48j4jcNGkvRAw7wbVO\nmp6H7JQf6wKKxWoJXDoTUCk+5MQRXu4MAL9dENbLsvR3YtNw10z3LqiK83jU\n/Uk/Bk1+ThWEXBj4+F5MYJq5jY1gBsZAbvMyTi22D4DKCfH2miOvtOmZZKrp\nRw2FJEXPCWWhZRpoCKRGcFmBCN4fW7Sbar9m21keI/px51krl1MSJfgIlhZ5\nzweP\r\n=nwQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8vx+CBoiem+5oAZ22ZYh+ojc+kU6rVkM7SU/BnUfs/AiA6FzclC06rWpJZCc8kSzT5f8A55i6PsYi1xXEe0M+JhA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.8_1564050358156_0.8136832737928839"},"_hasShrinkwrap":false},"5.2.0-beta.9":{"name":"@storybook/addon-info","version":"5.2.0-beta.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.9","@storybook/client-logger":"5.2.0-beta.9","@storybook/components":"5.2.0-beta.9","@storybook/theming":"5.2.0-beta.9","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7ddc50f117aaf1b81b0d371df74d27a5822a4a82","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.9","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-AyhPljKWr0dOoW5l0stJJ2fy/nJSI3eBjBGBe75JIhWLDyHy3TwITZubraqz9auyY7IbqRURnU65jNL9wTDVAw==","shasum":"155b7a8262e23215618957d42eaf4d86635f4dc5","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.9.tgz","fileCount":90,"unpackedSize":851349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOeQxCRA9TVsSAnZWagAAIewQAIgQDUR5fEiTyzGSiXBs\nY4DQwJMAJ7m2kMKZ2Mk0Q2AqGj/NDt7stwF71/2SyBiwIHMrZobrO8xlAVH+\nkO3SIdd0i5Q0cOckFufnbyhF3wsil1lnImsGuZBmKDuKLYjrQpz8wGfMvGxW\nN7EFYbCmMSLtzbdhnCXaiK6z1FuSNxGDpvJ2TqOkfzj5EOAdFvZnyrUD85i0\n/tTaW7hcg9LtKCtNNndgmymzk7RWjRAQZfj5tgApxVGlLtqgjDhDp+j1XMaO\n1gx0NyUB9DEZ7CjoHbkYDDWERjIe7fv+1ryAXAZWXs08tL6xj+xyDpcwBaWe\n8clhCCJUD5zpgJkhZzOIhP9xJtu3fEvZMJfZ+qPpSApDfDzV1WvlaTVFdq8h\nKtItQnogF8UqBfxnJMyjgO5cAzRb3HY79mfjZvyXrD+sqkdcgIGP4Lz3lRe6\nANtrsaKJ6NYpFPFehPHlqYQPWARIzkNRaawPmPkilA+//BPmBre311jr+uP9\npYNh/zfHje6aU+ms93C5KDwSvDzRUI9GmSTniqG6647jxY24aGdVehsSZUI0\nKRNQAIaTEkglNxJVz0/im+d1K6bOisF97juJD6h724Oyo1FumEDLvGTrTZkW\nTO4tOMzSD5j7I5TvKfH2/uUKLCxfdwRoTFKSKGJTNCkXuVpS7UEafCpMXdMg\nMC1o\r\n=AvJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDEVt6zaW8ln/UjBiFSRTizTonptBzrRs8F4C7Oc0OMAiEAzR2m4T7MBBoQcAoSa6lgdqiN/Sn2waxxTJF+Kd/U368="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.9_1564075056460_0.3256359115054368"},"_hasShrinkwrap":false},"5.2.0-beta.10":{"name":"@storybook/addon-info","version":"5.2.0-beta.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.10","@storybook/client-logger":"5.2.0-beta.10","@storybook/components":"5.2.0-beta.10","@storybook/theming":"5.2.0-beta.10","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c30383e066d1c7fd4337cb2a16a99792c5ada73b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.10","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-pjqBrjn1MfcVWDg8fxJziSD8KCqVIIHaIHOOyHGSww7hhLU2vqPUNP3yY2kJy0DLKt8aAWnzOK/TblKw8isuYw==","shasum":"9d1152d7d54d837120746bff6225b03c4b29188d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.10.tgz","fileCount":90,"unpackedSize":851354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOul2CRA9TVsSAnZWagAAhlIP/3cwZFajBpYHMnSedsEB\n8zWbtkFKc05rXG+7zyL1Hor+315AH4z+zIDrsGNf6iyCyGysxaT0ygwwB+y5\nlMfONVuVU4JwM1O5tX+xxl3tlmAkWgkv10y6JpzHk0+F1yelnLdZSD+FT0i4\n39Xocm5YP/21Q8nH8DD6OUZxUKjW//AHUBXxUGCXeg5F4W6On2Opa4kFZPP0\nl4RiF2zCueNfCJbH9rvBEy0Ems/uvgrRLZJsHOXH2sUQvyTRARCSSY15jXNU\n5pG6DhZINYSIr3Xhl5UaxftKn4tqY/pJfCutRmGr++6XaGvrivSqKKx8GD47\nxJyedDNdymG5eiL5UC5AyTCECBhdwpxPA3LbDdcIy2Dr4Xe7UVxaaqytjbUY\n5GJSfjbhWQl9wgbAo7sHoJr/aGqCdreEHbXo6KV1tnNL0G/xE0Maumzjx2hc\nQVtip2/QzAueRnYrDcLAB+mygu6TR7NsXubk6lNWK1K55wdgesDYObW6si1x\nOmolkoDQZgwqdVAoVDI2d95AHHwCotFdG+OWPwoVa1ov04n0hABphVjQZ9P1\nEEv/Ztp/WtCMngeVoHZRj6/eus/ykagMg4pB5Z6PvfAtwTAnj56J0quVDuMb\nVCsypKeCNdy3ataG5dNx/0BAt/GSTZiz7l7gL2/TyyQCacVeXoyNewA7OqyY\nmXIf\r\n=IiCL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvfA1KS3nlUgbCtREL06vQqP/+BZ0WF1CG0/TBpkwQqQIgI+yR9egJ8au8V3AsIDAlpPMXGQH2uMGzrhnnwtYUtE4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.10_1564141941372_0.3676376339641305"},"_hasShrinkwrap":false},"5.2.0-beta.12":{"name":"@storybook/addon-info","version":"5.2.0-beta.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.12","@storybook/client-logger":"5.2.0-beta.12","@storybook/components":"5.2.0-beta.12","@storybook/theming":"5.2.0-beta.12","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6f21ef46c276b7419c3214a1aa7170fdbf5aa35c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.12","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-KsvnNj4oPbOSB9zl5U1C56n2iwTqnhcORJfcvXb05Kap14RB+vFZbAZP280EmWn4h4m0ULFouBaAq2c99wZBHg==","shasum":"e1ca6796367895f84ff7752b8487f41b0eb53fdf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.12.tgz","fileCount":90,"unpackedSize":851354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdO66JCRA9TVsSAnZWagAA6TcP/2m67U/8RCV/weYbaqzK\n0GP4gwyHUya25ZJjZvcvOaCcaUatlCTyIYNcBVHw2XY5PiEZMQNLwOKlalu1\ny6UBzeUMDjuQ/5/pbGH3farV6/Ihx4hJIDEWyKr0Pryq86f5xSg1vV4+EsGk\nwx7OatuJ6WROzyCS1L3qNUnBhkSwXCEFiKfoKF6TDxIIGlRMi3N8RNaHyyge\ny69mG5JFSlNbsILNtyZLBKNNZfHFF6k+ucGCT/PtuVeFT1EdDRQCC/ef3xWX\ntYMcxpPD/jh8Id9yqrMExMEHWuHI6W4Po7XrKK2F9Pooizc6lW+vRsZO5S2N\njFFYx+tjuBfbM2hXMcx1mEldfDerW9NKe1bT7Ips8lwse8YPoZHxt11bZZfy\nGMJaH0tOScqM10fvwBTmqeB/esE3VYa7KiRdnyT4tPM3PP9mQJPHqe5dcn57\nDL1dk0GxvNCRNtCq45yo3npuZXKu8QABCHnHhcpGTr+KKlemId5L2G+lnSOX\n3vG+Ra4H4Rp39lFEWPvUao6084eHv4HrFaGLr36wUvX9Bmc3+FEwPh5ss8Cx\neC0lQcyuYSomdJNeTHxIgMRU/Hgrt64ctA1kqcIbtOYatV8nEQQ5f3P4OIA5\nEvqAm8TjPZyFW0tE0FXxvHDVALmtpMTHVZRd0qw5zZNp0nElpk6vcKHJO5jD\ngz4n\r\n=GBdY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3kIQcYdHJN57xUktnKrx7DNEJZJG2rzre9vrVjFEnDAiAqPbBnQxWgDS6v80bbFBTGPFrioNLLgie3IjhGCXJy/A=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.12_1564192392158_0.8711303319921695"},"_hasShrinkwrap":false},"5.2.0-beta.13":{"name":"@storybook/addon-info","version":"5.2.0-beta.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.13","@storybook/client-logger":"5.2.0-beta.13","@storybook/components":"5.2.0-beta.13","@storybook/theming":"5.2.0-beta.13","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d590ef6190895ca5370cbfa8eb5e9b5f8f9c6236","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.13","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Rf0qs2HYUNxDkTZPpQPDlfnEyCIJhwbKpyQ9ieLpk3t7bhx6FbzGCa8m+lTrnhveLlG38rEtwUw1dsV5HxafdA==","shasum":"9f8a3f359c3c21ccfd46ecc9b6f551cc7a90145f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.13.tgz","fileCount":90,"unpackedSize":851354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPA4+CRA9TVsSAnZWagAAtWMP/jUkgcfPS1nSdsxOb76B\nkmiB6TcWlp9tvmrUkQfoT0FYguWNIfHL87hpTl0CVCf67OSN12LFzExLjZbD\nQZKf4bwavqQwS9XWMxZ65hvPVXLBSnH/WwLYhnBr0FH27d3PwIY+/iMXO6Pa\nviq+YMQ6o8jnW+KJZk4DY6Nh1qvL2Gt3pqa8Odqwrtxan2g7WeG8drYRnrm2\nfJH/43QhwPa4J1PLzOdOGgxyBqnUQN3oNcC8sPwZZEy1Fn7CZFAsfvyt8Hbo\nLw8BWhl5lR3gPBmyCkJ9TcyrY1WjUH4aSwhsCU7kX2BBT2s5AmrYOKCDgAsJ\nh84lRD0acvVpEJOokowJhc9iO0tfRwWF9I17T38S24/H5ajnTMWlXTc0N3oG\nIuQZTbW+JrK+pViIUGz9Dk09XK0OvjvN4h2Brbz7SONC11x8nTi2cF8JvXCI\nlbegENVZ5k75xK9tteCcVTMdfbK/drS3zxx3GU3ShT5g2vkmu/T5/Ig8oizx\nmh2l9pkPMiVmQgTN8icOnwdhlbrapMLxhPzVbdtgf3RxRkxLaXW73L4T/lUQ\n+g3D6R/chpEYHFdfsgNvEvXYn3JDEwOmPi8eTE350p52IhWA/mVsPXM6PjKF\nkb5EtewvDpp33vKRrLpUy3uLVzWIhsJLJQ4w0PgxK28KheMffET9wPTZAzEo\n/UNM\r\n=Npsx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKD3fJSoFhf0fg8bexL90lReS/0PMZG5h5tIf529CQcAiAcRR/VtSH0uDAoTenEl4oWaS2o0cXujTEK2QUG/i8daw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.13_1564216894119_0.7812784153010761"},"_hasShrinkwrap":false},"5.2.0-beta.14":{"name":"@storybook/addon-info","version":"5.2.0-beta.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.14","@storybook/client-logger":"5.2.0-beta.14","@storybook/components":"5.2.0-beta.14","@storybook/theming":"5.2.0-beta.14","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"85ac41c10c923e86a5cd677edc1cffa929dd55dd","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.14","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Sq1mBMbKxNLs3Lk0RouCmTX2VEyGO214j1MjU0VMwZZA8EV6BUymELMZc2FthtrSApC37jUZ7p7jgkPQ5/Shgg==","shasum":"71e809152c7f007e45c38a528398f564fa35bcee","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.14.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPndJCRA9TVsSAnZWagAA0cAP/3fyH2jPSte/9SdFySPI\nK3eEaDIxVj56JkfaVEgKtA815SEQEeAttYMECcos6YujoYfiJ4/dxNgGO9oA\nbe9i73gjG7R6NExH79M2Ujoj3NAfTp0j6voq4TSe3MjpfAGlahNooNWac9SO\nqQBdHyVr6RIBdQt5tEeHUKq6KaLUCl5KJsa98Ludzw6aH8o/eCA3rGgUIFZt\nDEw17gV68ZEZy+oyHGoaiiYYitmNMtU00W6xttV2Bmja/CaXaYsyhRSYW4ai\n4CuChhfJ6ukOTsJZrYfxSrr8JvxTiQQdkhpSMk5vKjEQV8m/sCEqtWw1toXK\nyBuQ3AJdGqnVUm79xo1Cd2xQ7rwIN204GAeEK8ty+2/gc2hHnVOdV/+2FKm5\njlxX9cQr8MlCnu+GB0ZWs/4A5BGMNpjsJ4Nc6LMYM8EcYuvIvZdyif3A3u5a\nh9hda3xhhSMpNA/8AuHUNoD9NyRNmxHUQDIABTDqmrlhKsc4y7IqaWPArIv0\n+6FAewf9O4KlwtkpjJyYiiSosrg99R+0MnRCcEjA6uQCfvdCee/03dss33X7\naUFCHAnqv+7xdWW7GD9rsMtZRimdmZNLDgbau5lYiYOvrYSnjMD263gEnadE\nYtC+gye3QFC0TWFEpKtW5VOg86UDHs9w4VcHBpH4clLQlh2Z42WHekK575b9\nFxKu\r\n=qtzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3Z6yJfCV0TKHH8ZAx069MN0i5rXwRyzNyUr168leW5QIhAKFEK8nYnzeSBiuKTuErkrhtOdpKIrKkiONVFRpY/cnC"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.14_1564374857016_0.8956913226573948"},"_hasShrinkwrap":false},"5.2.0-beta.15":{"name":"@storybook/addon-info","version":"5.2.0-beta.15","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.15","@storybook/client-logger":"5.2.0-beta.15","@storybook/components":"5.2.0-beta.15","@storybook/theming":"5.2.0-beta.15","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6bb8f167de41e5bc54d6e8cbee5f10ef9586fd7e","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.15","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Zy0fjXj+QiVY/uRFocHMLHGoC9U4Epf2fRh7tC/gjoe+AOUQ8YT9TE7LqzyfZxpQgM2IcJlmSvAKnFuD9/G0nA==","shasum":"306e9d73ee1b4ab58fd37def30a6a0f0c606bc3a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.15.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPnseCRA9TVsSAnZWagAA1RIP/A+kROjK9OyXcfjGNJG/\n7Nn1+CVWJBQCeUH2F9/t1yNhdu5VZZBsQPs6HEUqtRTcUfeMfvQg25ZevtIw\nG6Oz4LtHLisVUlH/RC/uGdNtc7yNxomlCh3iqgLvnIETWFdEupzBmeIQpSwr\nuzAJInlBgYqj05j/KXW1kXDaYpDV4/D27FMS+07IHpo2N398L20jhdDWqNSP\n9al8BhXCEKMzsZPqryVHRuUYOidar+nNbRzpaGtOIPE9qmuECub4nThweEpd\npkKvf9L8wgglRhOT7Do6s+isB74gMzPPOu7//Mduh1iSSJKOmZsLOOLNNWj9\nU0jdVRvOfRVV8SicLjGCQte6AsK1s5x5NYRsNUUJKC69/HDqTkfGvIrKSJ3V\nClbaUxB5RwmFiKWc7m3H+wRGVSvsWuvEqNId4h0JxlC9EBTCIXUp9RGuAvQN\nHjWANksvOGNgKjDdMwBNzeiiz4i77XF/FzT9zIpGOL9PspbGmFwKGNbO3YR9\n8BWw12w8xHi/kY0JS/5O8CGdrWp7L6wMlHI7GEj8Px5D3WQvQiDJ99j+gCy9\nrDm3D2FjPxPek/GMLnT03gBWubi25vuLQkV6MIjMqeKY4N2bXpxUvX8rpGNx\n1TxwhtAYpXeBNWPyHZRTy1FT6tP5uHc0GKfdgglexDAGlbw4fZshpKjkwwtI\nzUIc\r\n=MaXK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnMv9+48V/7e89YFEVmSxKVF3V5S0rJPREMgc3wKROdQIhAP+6UM4eM5DiWlxjLM69HzHt7DrTFjXivTGW+pWzgI0X"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.15_1564375837904_0.4219562759674038"},"_hasShrinkwrap":false},"5.2.0-beta.16":{"name":"@storybook/addon-info","version":"5.2.0-beta.16","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.16","@storybook/client-logger":"5.2.0-beta.16","@storybook/components":"5.2.0-beta.16","@storybook/theming":"5.2.0-beta.16","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2019fbda8679c18a3b0ddf66314c4b9f4acf1a34","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.16","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-5+GxDlaX4/OEmW7gh1G5jWWppqUaM/iFsRfkZ+887JsAMLT1ZJVufFLN43p1mJuDQhnWktq7MZmsTxLBfDHjFg==","shasum":"ae8605bb00d42fe4fb58739df70dfc4f487218d8","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.16.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPq7rCRA9TVsSAnZWagAAlEEP/1RctYX44le9YNN5bzzj\nXIF2KwtnzV5X+VI17Z2SlGvliqB5D3L2ET0GXHXg17Jwjcrnv9t8K1f5GSH7\nk51U/7jKUv0liCguhDB5OlEVnnaNOP7cnN3kmZGt8Mvc+7pyPq8CGXyz7FSH\nZp6PJz6DnhU/ezjovM+eMWdxR6CbyiOHiUYLArQQh8YxpgGmgmA0FseWtTVQ\nssgFM5Dz9czhB34jUX9JO13QSxq54DRSC7dFiRRKBBP/aYtT7VAEDRZwLiKo\nuJOvK17ZjOdl6ZJ2rmA6b7z9fuVWTlS7EbuROpVqlVO2vds7Lcp0JdKAfgFk\nyew1Q4qx0F3wSMbk9452FJLeYJAIUHYZPgCt7TNGOq8sZ5nOspO97zhPH18X\nF4lrdg29/qH5BImibTRrZdx9LFRcyjDYiASq8DMCw3P5YCAN+trs3W13ybvE\nSXqORPJfItnIfFj8Ps6gxpU8KDD+LMyJnefBTH8h/dKIUyViO2mYhU8p19Cp\ny0JjjRwVpFMP9zQVmWqbZzkPTJhXHkfmZXvKEEYn0SKH4OL+709e6ilvsW1i\nOqazD5RQqtvBT85IPvyhjrE8a65ZNrTAwwqm9S5UWTH2Hby29H9kcgU7/cJ4\nGU4eoqD1LHI6Tl+a75UfEEU5yIllebyCBWSIjCD76/B6NnEeuHIC8PRS4ge5\nu4Iv\r\n=GK2J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1S/hlhE/M2H6NuuMEnJg914H7fdgAEkz2zZHo3PynkgIhAPDmOZcjQN8+dh3eus489ZMLHDmaySHp0cMfrXMBVlYb"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.16_1564389098221_0.4897372170783141"},"_hasShrinkwrap":false},"5.2.0-beta.17":{"name":"@storybook/addon-info","version":"5.2.0-beta.17","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.17","@storybook/client-logger":"5.2.0-beta.17","@storybook/components":"5.2.0-beta.17","@storybook/theming":"5.2.0-beta.17","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"65d8502ed719e57df1deb5d8c7e0b87ab4f00b5c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.17","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Ru8gULiFJ73Zi0Bqn+eCxPvzy0lwhOJDuj1CciOc1UDmPdq9mmrt2OVDs7up6fZkpcphU1Taf6SylaSZcqWEWw==","shasum":"3559de573dd5c74fb63aed6d031f070389e4edd0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.17.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPtOGCRA9TVsSAnZWagAANj4P/R9GNE1gxl4KzNBQ4sBK\nOs2+Dsnzoxa388idKXLVrGkVGpqprxjYKTe9jBLv8U4ZXPkXcBpY9HAUWjjH\nHUW4mzDxEY0whDOU9r8W8GVD0y3p3FXiYneVOQi1OALlaeIYahkH+nAkjFQe\n8OWHmDDNCvtdEwbiDmkcu7pM+MPGZS624aJOAQCUrPapmDPm/xxDnKEtilt6\n7mQB/Rwk+7flCM4NaseJU/3b6CX8ds0HAW5dPAZq4CcVOQMi84ODU3NxGZiu\n35Dskei/pVSyHq/oDfmGvJJgqIDOAvXimDmMUNNg6L5U7oLM8/t4Kic/okDC\nApeC4QXSlb5U504gwtVddzUPuYlyH0G5KMnKzU1KZ4+AM+h6nKR946eBWRtd\nvpkpqkMGNP1Gi45IDJ7AvQjUVVmzCc8dhJsa7bhB3wk8glbEFOuBRHE1r71z\n1SofbmQEYrbhGe3NT3R9+vCEdv3/UPK6P4kLaOZlzjM8ham55QggPN9un4J3\nsLgH8bhkZp6aCscTByFUqCsHKpNPnlx+jCq85OmzaFSOJxcadFimL7EXT1+p\nJuBq23KL3YrYEjtib3EpmyR6qHP2OAQqes3IFpXBoUFO7ihNNNs7Y9b/Obu1\nSd3HNAu3m+CNZzudhoNckcTTNf2KX2f6Z65s6suQbnxjV1yJRQHiVs4PTi49\neSGZ\r\n=Ag1i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGP9Q6U6yIsNlOkvkgpPYWKAjmDWjMl0lHFt63to08HMAiEAzN5sridVp+3y4mFBnC4Xh42IL+LfFZ5AyU4wPxCwi8A="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.17_1564398469729_0.43150988843206095"},"_hasShrinkwrap":false},"5.2.0-beta.18":{"name":"@storybook/addon-info","version":"5.2.0-beta.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.18","@storybook/client-logger":"5.2.0-beta.18","@storybook/components":"5.2.0-beta.18","@storybook/theming":"5.2.0-beta.18","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e8293faf1d7bc834dbc4c011a41c73b737fd3a59","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.18","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-dckTvWjKg2n4pkfldSkSAvBiFbPmlxnruGS5lqASO+jh9JyvybXofpJetQkSeXzwW1BxaT5IbBXGNnrzPHAsKQ==","shasum":"87e11a5904d46a495adf74c319b5a0e5832e4fa9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.18.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdP4TTCRA9TVsSAnZWagAAxBMP/RKUG6ZqPak2sP0PRcyx\nM9yhOixzuXcwWA79rrpxUmclpXhKEcIe9RCimNsGkx8hSNLlHGphlTEeDtYd\n/xTDB5K6czskzodeKeke/TjZ/8GrI7S4HDDgbKVgOylNzBQMr+RVMp2vMLgA\n7NRtZkvYY+ObucYaRoGcg6H5rdTtcyJy3QF1be5cmmdrGxxGsvwxBA3zfoQ6\n1JNQybM8aaqUNiYQ3nw7W7tnbguxCP5x39yvxUel5Hl5g3b+f/wjqCLXwch0\nDfsDakF9q/LiPoZxkoa+1yx/CkEEUGa8YDfLlUlmM6C9SnaYI5bVL1uuVg42\nL6AttxTwcC6Od6mCJTSKFFBEFEHpXBxuN/p2CYY7beqiAeI7G311wzFoBc+o\nmCvl4wDro2zs9mfBJ/AOjwl3WN7hotPLqAumSJrvLckfKSO1J6KUafqWxqgm\nnKDwMcYA4ljKvvQGnvSypmQ13Q5k9aD9EWrly0u8SiP0BT1PUzmgrC1RQWaS\nItQ30qamsxAI5jm8VyouF5a5Wicw6MD5L1aAy0fxRScnXa/eqg5JNvqkz/sv\nc4Z8PzHdL6mpAIBean4EchrqERAk4lK1Gj3F5wgs1TrzqU/Z8XgtQIko2J0p\n/zunhOselqX4g7BCRaM54cCvgecHoxG4MOD+d5M6njyXn05xWJIAAeW5DnVG\nTeJg\r\n=I3U3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9yJ60iAdvv/JFxTZdSVsgTO3+gSinb4UfpZoAjSdD+AIgFp3HtwbCojvKZTAvL+rb8vf3RufH0/Zxf4uXnMfmrUg="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.18_1564443858258_0.5232297549671086"},"_hasShrinkwrap":false},"5.1.10":{"name":"@storybook/addon-info","version":"5.1.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.10","@storybook/client-logger":"5.1.10","@storybook/components":"5.1.10","@storybook/theming":"5.1.10","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"000361f27f8a9c78201ffce1fac080178f0a62a0","_id":"@storybook/addon-info@5.1.10","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-+o92LNVGWQJ7oToMdQdaKBHYwfhvn2IRTNT0mZ0Lo1oCmpw0D+4sguYnxiqVrX5Y2zt0VMd9bepkc7zAl3t8VQ==","shasum":"11b4f8b286d1990748f2e2b6ba248624a0a876c4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.10.tgz","fileCount":92,"unpackedSize":606757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQVgYCRA9TVsSAnZWagAAy+wP/je6cpaHC4gwZTsmntfe\ny7pI2aZmAqxMs27tjjRdUOaMaDMkxRsgYrNvEZVLVx3aHPWS72iJ7f4vRdYM\n3QklxirCkuW/ypzwBqyYASWWQWQwhbTOCJym/r3+ADn9Mwq1soGZdp+mqrCt\nsDU/YQP9h63ILFL7kyvZwE447uq9URzx3+705ZUZdDjN3gMp9vvEMJRXNVod\n7KmFKc9/fI63pO6HWdoL40DY7rNUjnEJuJ4Cvba58/CUofeSQaqkpBfLITgB\ncLu5B9IZtUTLuDwWi9tUXuD42hfovVKqfmadG8PR+0kMWJhR1XqZUesAOTyZ\nyerg140jufM51Yqm+EUNiGRAwB/sL49wDUP/wE7QtS1SEylRU4EFcvQvu7XB\nJYYnEupga7Mb9uDEAGMMAJTe9ilyGiw1xtWhAQvxrmA5u4u7TKl3yOwUKy0t\nX2agxttx34G8cicZBpSojTqsM5v1ChTvL/JkenImjX0t4MFbwtuE5NyxSTlx\nHRdFC3+4NxOeE4ZHviHjWwU97JOwn4nZDRdirQ12QV8yWcLqVejgm0Y4ETN7\noWmHmM0o2w6yvQsqbTsNW/w7XqyniF060iODdjLU7HyDiwuLL/s8Sl2qBpMR\nr9NossQDRpz7Xo/GxRK72flK6+Zvfnu3nyOg9474KxV2awFHbuGDzCM/iItq\nuUuE\r\n=bz2Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVES0ASlhUJlVKmgw4loGogxrsF8SQjjoeND8UH5obBAiEA50xnaV605nNch51ouEgIUdU8Cf0yOrfqLXfwWSHGxyM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.10_1564563479665_0.269633597347831"},"_hasShrinkwrap":false},"5.2.0-beta.19":{"name":"@storybook/addon-info","version":"5.2.0-beta.19","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.19","@storybook/client-logger":"5.2.0-beta.19","@storybook/components":"5.2.0-beta.19","@storybook/theming":"5.2.0-beta.19","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b3108225d71d9e087370df0b16fb798ff69ee0ff","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.19","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-WescTA0mMegpJrlk5BA2sXeSJ+DveOkd+rAFk075nZ3DcfwnL9HZZXhT/z05dOIGnQNtyANITTLfhOlUMvd6tA==","shasum":"37afa4f4f9133b3668e5aebfbbad2945a7a293da","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.19.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQV3UCRA9TVsSAnZWagAAmCwP/AynWp5AiyMuogXkd8fI\notpPZE75lPXNMHQB3BfU1mSZoCqcD+4uyRax/VCkZPsJFz7sMcOnqcLO8WLP\nXeo/T5KDucOCnSKBdnswBdKdv+g59WJRiEuA+av3HuiRL91va2hvuyU3YbgZ\niKV2WquIRDimAXebr/qE14N+LqSxcWl+QTSGrCxrU4tqtNNzuuXMF9/KR5M8\nwndOiyzgK477MW0wfBRVUC4ebvNIunSYy7GI3LMUCas5tY5kZf+kFg7nKwRi\nLfwh3GEVxWpClRmSwKylSRPTaWmym6okEoew5pub+3hbMRcTGyPpOMwxEk9e\ndU2mP4gA2j8b8Dc2o9oljA4cga1FPjOmAi56vDdJ195lQytFxNv8PzTHxShk\nYdAO0+bOeu+UWDiY/X8EYM2qb0SL4xzM43rHJV57cFlYrOjTxY15BWMWmpGU\nwDF2MKIjf87tDgrIavFUUEFLpDW1HHpzXTVkYZHosM0cHx6gw3RyoV0SbKOV\nq6At4iJ+QOuA8pS0b9U0MfaBKFJoyQf8e5JDRhOHpVEItjbm2pVwkIxp83qQ\nprz5JhG0L4diK7g3fGmjd7AykmbUxZkQ+0A4ZAzM991BZjMNciquN6QuMMm+\nTXORhgr90YeiwAGQqee3fKgm6xQ827M5AP3bAXu0Wy4TAsgyLWGc4j12La/i\n0VEh\r\n=xMvd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyWnHUItMmoWi+TLGve4HiN6H7+hLSyGeGOnoOVXqqnAIhANSF+K0VogDLyV+2DAIznqFDMYSZm4yBqYC66R710MEp"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.19_1564564947713_0.5394682750018256"},"_hasShrinkwrap":false},"5.2.0-beta.20":{"name":"@storybook/addon-info","version":"5.2.0-beta.20","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.20","@storybook/client-logger":"5.2.0-beta.20","@storybook/components":"5.2.0-beta.20","@storybook/theming":"5.2.0-beta.20","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"49f313b884577bf619949579eafa39899670861f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.20","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-T0YKl7a9P4DCiVnztCUC5y9f6wc2efOzX0dZhS06PliLYwDBOWAnYw/yMHgvOoWAGiUXbi/8sfEpynoE4RyEcw==","shasum":"08fcf3442db055227216f91e94ff048456773739","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.20.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQwkmCRA9TVsSAnZWagAAjXAP/0ips8m1BvQzgrSsQ1Pe\nQk8u4w9a215Zq/HUkZyTJwrhSCvFes2BnnTUI0DtlFtctv+/1Slrbwb5jzwj\ngHD+9mHm8FjnhaLQG/GzzEXim5aHPz2dLzSfqCbSAgteTdQ7g47Kg4ZLhG3R\nMpPXVa+PXx1b5o+ePUT8hOC/K20BQ3XafbsuxRIniI5Dl7lK5x0CteIGNukR\nY4ufzAuo3s/L+ri142Y2NNtqmpBy7aF8kTEAuo/HCfYdgpLHeu4/AhSVifzu\nFdg2I3BCcWmmXipiMqnhjGCgEkgLRqbcc2vlLaZmst+qdb8QC8MlrtgQTMYw\n5iEW85PUfzsSU7OWs6azalonBcXrLd249Tz1ZyURYc8dZvvntj668zIvHZhH\nBDid3sgvE7WKIoLDCWdioGFBAFuLYX59idjwanFnlOoYSIvV6JuBBFE70YvO\nz18dqrgtKKo6a8UZ+UqDYywJgb9RZdZIxbbvzSPdq7fMfCoSKQ3WkwOLMXtu\nhJauWINu4f0EwE3drsz9JbmOTElk44Yn5YUkAH3wlzy0N/3Y7THB1hM47ZiE\nw6khm6ArU5EWYrExBwha+QGAld3RYobbVA+QGgQ6LKT9OTAA5kcUZSo5GD9h\nuE1se4zSMWELONJuJP7hNI12L/TvEg5gzzJ7ldAkqgtOhrrQnzVcLVxkr76e\nD2ta\r\n=Omb6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDskEJXd+XOKquLQaD8lT7WG5i9Z18awPP7s6d6kBNwtQIhANIORo3tm9cTaIJrioFwZ7W1XXnLfQ/f+BU6/pj9GDXa"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.20_1564674341781_0.048632018469127125"},"_hasShrinkwrap":false},"5.2.0-beta.21":{"name":"@storybook/addon-info","version":"5.2.0-beta.21","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.21","@storybook/client-logger":"5.2.0-beta.21","@storybook/components":"5.2.0-beta.21","@storybook/theming":"5.2.0-beta.21","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ae8baa22ef8bf019d2cee07a5ef51bb6aa711359","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.21","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-mw7TnvTohv9yQzHUN4L52r2OqkPVbTw7fzY9oYpd4vnwGg7BXCWAFkvx+JUnFitCNUrHSnDNhh1hIgTCcWLL+g==","shasum":"074f24756106c7279e227ce5475934deb13e3be6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.21.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdRGT1CRA9TVsSAnZWagAAvLEP/RL28VqTt28vHZyzeFvz\n2N5KuJGCRQ7fZ3vmrNBgdXdIbiv+o3hREJPEhCLFxOUZAtw+Lp8dFFuxoICx\nhdtTW/R22SxxmcnNEWm7IHDp3IJeTeqt4Lzsg/8D7nRBAQN6yLKBuM6ITXUa\n8Yk1EQ7WNaV8D4Z9n3+I/KPXMzGthLjHJOWCaUSuScBvUWPP4kN+TbQlFFLJ\nPLaHBz9yeyA3ap0iGDkb0BUIqQLE+1XAAX6bserJB9uwPSx7NKzrX7T2zIK2\nsn6L3A+Pv8xwzcqt/XBN23qNs2Beavq2PL8j8YkABlR1yJVFzc3YEWhnN02C\nx8R3zrlsjUiECXexyCBa9zIOGbad81LkVW8BUMBkzzDSqK61ageE2bbs99t2\ndU5y/KujYlcXFj1wUB+14tG29iu1/Jv0FCqonSt24kSJttxn5Xt7ZEXYKxNd\nY/8v+9834EoZWQ7jWtVJxvAwimFmFUfM3ErWTRpe/NpgkZjrjEFZ1J8B2qhf\nzueDW4lUnFLRdZeR9VqcsWJ00oh5MIcbIHmr0z9wH7dQh15eB2H/ug38eCrV\nyHmtzV/81PuW2R7/LiPVnVbKPLdEGKiPWhngptq0H5Qeec2La2n29NCzuT+z\n4h+lOIo4FQtruQ8WNkm+H/NQlGywhfBLNkxARZ5Ww1ydEO8jHP9AbzHC/DIQ\n03Wi\r\n=Blaz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK4R4WepLBNRQPqQWNixdRpJD+p6TGjgjm9j0lnfBQzAIhAKOf4tiOHMD8Kwffpu9ESGq0dsEf1bnSB4QNZ6jMlYbK"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.21_1564763380589_0.9817227010546659"},"_hasShrinkwrap":false},"5.2.0-beta.22":{"name":"@storybook/addon-info","version":"5.2.0-beta.22","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.22","@storybook/client-logger":"5.2.0-beta.22","@storybook/components":"5.2.0-beta.22","@storybook/theming":"5.2.0-beta.22","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1449efdab4975330e31fdfbdf618d45c96a8d357","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.22","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-hAcpnehT3qQlDJC0UMIiTwmOxCPKV/POQPgdfnuQKFOljpvkh0o8k7F9MI5Wds4vqlI2S3/yIOlDMizOaXNs1A==","shasum":"ffeedb495b476b5ec4a65eb1ac5c8176043967e2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.22.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdRQlDCRA9TVsSAnZWagAAJ2MP/3nL+wC3rCgV72ZU5Ea+\nJAKbg2fybcKde6XZ889Wym5ktN32KfgyybDcYwrbNpAR5D+mRYJ6ptC9WpMJ\nJ4PCNM7fgcv/wokHGYkn5x/U41pmCMryMaFPVHWgl+8P0yYU9T5gHuMPoiOT\nnxtXCHGWqo9uUxoIYHYO5y/9c5rHHPBuTKyJ3Cgn1qELY+zVfYDwxKKQA6rz\nRnjvXHRpdSje9eIrdCETksHE/Go8XYWByu7Asy4ZF8Sl7pJsCRjaxdph5u6W\ngWMmxszxWYasDpY5suhY7qr1UUrJuKnz/nyMtGCy7a10og6jE2UMxOKsFeYI\nc3cS1MQKiPRVWpKax7zawVt538u7vQXnPkzp1+Pcd8GAZKHvC2N/hNfh6Ys1\nbN5wgfi3fCo6rY7ohcqndklSbX89sKk2un6Kf9z+En40ZBOPxUoOMrgU28p5\n1oaVvqxb+3JVZf7jL50dq7553aacauapdntpQ04dy/D29rWCxRZlJMjJxflP\najEdVefeKMGYQvUQcG8eASU1UIW5p6oq6gGMc/wDYREpcnKG7Qk2McSrw9a4\nTzoO/G4tKNkn45H6wra3zFuR0z4rUpgkA+LjHE+2M+P6mYJh46LrcHc774B4\nwuWx88x23zt/Hl+kftIcWwhz3sLq22V0i76YsqYvuIMx23eAkCfLYBB9JBgE\nUjZT\r\n=7AGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW6Y7hBFquKYK7d2e9XdIovVhpD4A1hHfAtSYLO1u31gIhAJOlJLPhTnXWf/UjMrJmu+FK89Wtrs+A+JBbm3ormmWs"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.22_1564805442300_0.04535304787995442"},"_hasShrinkwrap":false},"5.2.0-beta.23":{"name":"@storybook/addon-info","version":"5.2.0-beta.23","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.23","@storybook/client-logger":"5.2.0-beta.23","@storybook/components":"5.2.0-beta.23","@storybook/theming":"5.2.0-beta.23","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c54cd126010ddc918222de12a34d45eddba9dbf2","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.23","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-yQTpgWsSeHlUwsQYwJzLVK7d1P1nJD9bxywfNG7+0NCYFDjRhG51H3oiQOzLchaiEvidaZyDkx0Wop7EU5bGcA==","shasum":"f95f2f29cc9f61a78369f8961bc0c260cbceee03","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.23.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSFvfCRA9TVsSAnZWagAAAjoP/RjTaiaDaifmALD2zXUK\n5GZvHp5FGS/nOITem97fLTlnCOVvfCsuaBkNUtHMmS7w/aShgG3nMTs/i8GO\nXd5hE0Iew97InUFbYfd/Yqngn5eg3jkHM6iujP+Oo6cWbo58dxOT9S2/ZtVt\nn4efQABDXMp0zEZWy+0Wc2O+m2x2Z9f5sDyIz32xf7R1iU9jjeP6ZlmXPFBX\n8SIn+ICxKrQgDYDQ2QCK44f/GGO/EWX/DJEA58w0DFB6lavgok/B12pJPHGe\nt+csdEprYafy2DUYnkEf/4q+ac+4J8NWGSkS3K6GypPhdQICzLmkBWI1+ajg\nl7eMbGUZe2ujYrpzATRWJCoSm0WjH+DTvWrsXVpQaQap0wAYneGRmPOqaPic\nWQuGQBqQmTeVawwEAYRjinRwf9EYkZTkv3jv4tUplWRuRIgb7a9PVOPTwLUQ\nNmDV49413kdKPuzHZb8EwwASrUx9Wv9v0U2WWdbWq1N2YOGBPxHVm4qntDVl\nFpC+Bp3yIrd/5MVewU3h02IBX26koQ1ANujjCLKds0tzf/TVui3SJ3gZWLqc\nc41c2R4P3XE7PXMer8aXtQN7kM94TQYD/PKED2U/7KO1Q3g0BBLomgCtWtiO\njX+kEcBsrHkgO5IUs82kGYj3EVQsRL6v0Ls6e2fYLv7zcxxJFX0+sIz32eci\nPrii\r\n=K5M8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqlUBIeNLtIe/yW91WbGpQ5SR6MilBgxIyohpzIfG0uwIgcfr76cTYK7jncYGh1wBD8SUEHdub70SC6MY69Uw5UJg="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.23_1565023198391_0.39028844274284613"},"_hasShrinkwrap":false},"5.2.0-beta.24":{"name":"@storybook/addon-info","version":"5.2.0-beta.24","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.24","@storybook/client-logger":"5.2.0-beta.24","@storybook/components":"5.2.0-beta.24","@storybook/theming":"5.2.0-beta.24","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5dd5fc022782e2f9540d4310e26f0a724c14c811","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.24","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-5NJ01VYLp8CXg+CPYUYr3aBpat+2tezQwo4cOlrMdUMR+YZ0jFwQUNLZmuhWBhlnGJW0loThNLV2W6R/iE4yqQ==","shasum":"56e5e973136134fb435addbc8713b0bf32486f68","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.24.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSkNhCRA9TVsSAnZWagAAZsUP/3ErI5vNrVvvrRydg0vh\nD1TrVaY3wI4UZszPZ8oZleuHpOsglAMrWZxees7C1+syX4mebXrKlESMyPdS\nPXapVOFgcPKkoPkArEQ49sLaG7YI1odL6hAsl1SEW9Qnetsqrxg11rnTa7xQ\nhEoo2Mvt1kVs+h6wTQ1lOPdcEBIufZvJrjFWSYbDxhQr7XiHLDPpIN/e6EUo\nDPN/tfEeJuHeIhYFU71dI5xqNPkWiok2jAaNBSBrnR3Ix5Kl5fOyB3Z7Xmtm\nL9zj9vmbTSUs2l2UT++qEd8q6Xkk49082tRFURNklfdt9go+XE3WuhZokuAu\nE7pAaPfLXY8OaMeM27NU+lDOxKo5rcs3Selc42/YKemgztWq24SwLZXCS/DC\nLJodFpG2xrebeAF8CZ7kSN2tC5kB72ExxPdqyssUc/LRIgntn911TsLdsqca\nMk5zoxUGIxxLqJVbwCKJ4IShbmsNkFcKD8izhF6u5NMFwTewzU38tJPaE7+z\nd4Yn5ryjrD4P8A6S0ys/3MHZJibVCa3bxHxehEbOPtB3+1f8hmp7H9aPRyTO\nA7eDxj9W0e5GTjJVpSFXEZYk/6fg8KF0UNnclLcsyWp2pRC+1DZO4pHFkxiQ\nL8AYIbyLWPpOJ1x3E0Rv8AfZheIFXAMgmg+eUNL66wuAV6QnevY9OG+dH4Jb\ngLUG\r\n=b++E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5W8TJ5/9yEIM5LjbQggzrfwsqofrvRHe/hWRThyJOMwIhAMnLKWlAchNUWb8Vt1my/uphX0wdQZksiLLMJ19bmvVt"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.24_1565148000604_0.8927007181732332"},"_hasShrinkwrap":false},"5.2.0-beta.25":{"name":"@storybook/addon-info","version":"5.2.0-beta.25","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.25","@storybook/client-logger":"5.2.0-beta.25","@storybook/components":"5.2.0-beta.25","@storybook/theming":"5.2.0-beta.25","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"452b6dff54fc3a5ba711dae9484c331b6c4e708a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.25","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-VthZnTD9yQvgztz6Ni8GXBstuL4BAUJbBwhIkp6pu1u8tZLld0z8eNR+UBSPSbIhWBjTVbVkAiwmZGOqt7JWkQ==","shasum":"1a635a770dddf3541b5b0f7a0debddb643bd834c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.25.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdS4IrCRA9TVsSAnZWagAAsEUP/jISVXuXBGERxUzW1Ljm\n6hFMndTMy8x9Sn9CKqpvKtETiuAxQ8+QOiQGP696IrRYymDefarZQ142Ifxl\n+6UmEnBZtCyS4YTzrEhAOtFthVg2dqgboiSrDy+2V8FTPFiXD7wk0L3lCM/2\nE7ToV5FAjSUtTWYRI8q2WOrSkwIixDSZRVu4SR/xOJ9PHI0NhJ5pY3/xtM90\nBaA6tSnJUjy+nSrmkUUIpuyY85FqUg3n13gQKBCOyFysqVOqldI0/15LnJCv\nqndJ/OYViGgE5e8WR5g2Jg+43WQB8CdBlPc0BCiqQ3+LRBBMgssYlfmvMdkI\nKH6j0xkXrxYIDM+IzrRF5IuL+KtT84LSeoPpzDmVsmPhmngk+gFGdB5aGjaH\nez3OYnP+a1+WFTMbTBovHwyOaR5wtszGDTW/NtwIm8jQ+7Hb+HURjLiMIf17\n1kQOt+/Uv4lQNsmgZs2llctqNiyQudlDX/yYO1pGmZjiX4l5Svk0tYZkSYJr\nAGtyPomdx7WSRKVYKgnG9Ck/mMD3X3cgHs3hVoTLSJ23LbZ5KAUY1XRTmW15\nUWJNP34vKnFFniMzsaecKpYD1VN97r7GAMxE3w6+VQW/1nAeBLO2wMJRWoRu\nVhHQmWMdIAymiOhMl5mq2mJifzc6lLAAa/av33mv1NORLnV1Ulp7BGJX9BYU\nzW+W\r\n=YCkg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFEoUdlg5hZwrPGB7ZQ1LwRp4gk0ydiTKsSI2cakrtEgIhAMIsBXlzOP+wnEZNtMnenAV6s6C1b3EAsagEomcACYOS"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.25_1565229610190_0.9057164178392043"},"_hasShrinkwrap":false},"5.2.0-beta.26":{"name":"@storybook/addon-info","version":"5.2.0-beta.26","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.26","@storybook/client-logger":"5.2.0-beta.26","@storybook/components":"5.2.0-beta.26","@storybook/theming":"5.2.0-beta.26","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"901ff4fa05aa62cc75a0443bb9bbaf58ddc0edb0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.26","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-lwROwQIPzSGRkpdSAN7vX4rnBpi/6hcsww3bLqIfNAiZiFO1BumPZ1I8p32hyT1DUUN3Dzb3t4u7xJpb4B7pGw==","shasum":"409d736e004395e038821b170a0bcdd0f2a17a21","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.26.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTNy8CRA9TVsSAnZWagAA/w4P/ihgtMONNz29SeNwMI3L\nQXH8r2OIztBYXKwK0CmOlfiV3gahY6CqHklknzxcgoaiLe3vLK5xCLTp08Dm\noNyg7SV4kViwKJOWNYbYCFKFb9+RJGDMOj31vrssiuGuY4cUl9QD2HXphn21\nLtZf6HSJxs/PJRP/6yVbxUPa4JeQvfb0JYYL/QTTbwe7hrMRrgtI1Cv2E4v5\nCGSKgA8uWBr/pASZh2p8GIDqRqlAHs9vkxgbzS4T3Ni/iGeetWacN6QwZCF9\npFcSui+b11szIWQVwXDsiWCbiCcpqCI8424apsHi2Chkoa+Ds3Bgr3CIBsoc\nbXcVVRnRRWAvUIxfwrMOAUziuTyPPMHgb6JOx3kV8PrS8oN4l/0DewzF6UA+\nKLjLT2x2wNOnA/xvRhXN8O0+var3Po5STfscKXM1Kuk1aZTaHcyGEKpKuKwb\nwAp7tLlobLI38V0oYguSUKi9oksjyFSic6ZEIhNlokbEsaoG5uB0ZMpmRLNX\nHY3Dsbvkqvsf3CcBZUhA7OUjQCjCUb5vdJaYdDBIS5OEV+anPea1BZV3PYDo\nvMlgmjaMLY5JJwbgQwDBhmBxzg3Sp9c16qTIIbaRZc8f0iSW6G4CBdat3fcH\nX5vFzDKCwT+G/QwIJs6xkLa4l9Fw5O7misEuNRL5FNs6tvVBjYQ+cC2ypWz7\ng4vN\r\n=zp83\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnemKyvzxdBTOt5NV9UZazqNQQgWXjQkDirbroQltbswIgAJo6YJe8hUCRxduzyBvOFAed4WibqX6BzEmukFQnpnA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.26_1565318331249_0.7568669548983664"},"_hasShrinkwrap":false},"5.2.0-beta.27":{"name":"@storybook/addon-info","version":"5.2.0-beta.27","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.27","@storybook/client-logger":"5.2.0-beta.27","@storybook/components":"5.2.0-beta.27","@storybook/theming":"5.2.0-beta.27","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7fe14b40346e601f1c943f0b7961c2a72250768b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.27","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-WoUlSDDm4FOthafe5wUzRXmTyr3iNHGn9ykuFnImYJ/dYDjbWe2+NBDOtzbbzlvZ9JPla/Ut+NY9AHQ6vkfmTg==","shasum":"6a25b2b9b00c72567cd4a2a478d27e430aa6fd01","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.27.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTrfeCRA9TVsSAnZWagAAxScP/R7kvvEHAyOgxYhYeDro\nyLkUeUyM235/UtOMRFmAOj3xSEd4nxmHt32LudS9KNW+IMz3e6g2FgYUEG9b\nYsto2Hglkq2MLW4uX25Ajn52A8kCn8HcibIG462X4calpZLiDY+q8OGiFE68\n1GAmPm9qHArHHXpqtCxK972jSe2/vFuh81BW0t0K8odEJV0hatIUG7YPaq03\noVysJo+Udc+ZXIQjFl+Wbb6RQ1awT8CRujn/YWETlOhOPeJmXWvvSavUYUh5\nP41I6n6NAKawLERkZJxd/h8gGBvxyB1c0hMgsRVj+po7qmEOvqui1U46IB9w\nJMjQ5r0CraIwiJ70u4HjPY1a543eoDtrTs+BuMsNlKTUfbG9nJAvSYud2kR0\ndbf3S+vBp8FnvsMXalMWyt1/sCXP6LFR1NUwANUSeg/KKKeyXTCLi4m7hshA\nTUXRb3QOOxNa868cf9ivPcwIV9E87+4h+H4wQcU4NbzTVV39pna3Hq067u5v\nmMdASGxCvWyG41KlH6dDsqoLN7TrZcR+P9v7yInHamt9VR0C2NPMtR9fUIZ0\nECinmrURlLlyS0tLHnxATjV1cW2VosT/GmKf10Wz8a0U+Fj5r+0U+MBc3ztD\nuqpf75+qtnqcGMyxL36Y9ksL/eTIxkQfpbv83QdwQBEpZ/XhXxpg5doP9YEK\ngw5+\r\n=+Uep\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaVz4R5Z8HTIw3DoWPh3MTPC6GMwM5CQ4WqrCdIL5ELAIgT75serhjqyn5Bh57GiKBqf+/UaRQZGVi95/mFl5jbjU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.27_1565439965814_0.581117175426634"},"_hasShrinkwrap":false},"5.2.0-beta.28":{"name":"@storybook/addon-info","version":"5.2.0-beta.28","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.28","@storybook/client-logger":"5.2.0-beta.28","@storybook/components":"5.2.0-beta.28","@storybook/theming":"5.2.0-beta.28","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"54dfb23ab34f941db6acd385efb0b1e5ab880934","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.28","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-oF0C44dFpkWLOkiOa/XuA+rjIEHcZx9+2duu8Hg2wFv9+UMOzda2cj+uCUkMmKbzwjFPCvI2TU7/VwWvS9ZIKg==","shasum":"d9337722b6de1daaf05be1e56a68d763d8e04886","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.28.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTrw+CRA9TVsSAnZWagAAcdoP/0ylFg+5TMN589srxhJh\neH3N0ezTHpOdiE+7TNhNv1NEr/glQb95YmSfOIRItw5HOMXeYUjcJg6fk/wT\n4ReCgKlGHAkFt1tHRDqXdXIw3e7pqIewB0Pn8EMqJzg/V9zdwyIuxE900ePr\nQbJabeC162J7tKLLO+5bDVO7nPwDuSL74KkYMi+bcLKDdjEv3zOR76lUEoGy\n1FlykRRbGipCOFW2gGzySGknbuEGs/BEVDd86sTVgG0F+two0qsJO8+9rRbM\nPoBfQHtyFYxdO4zqSSFC+0aCwJkq6CLlJHZqjwT3bWxMjE8uNJ4rpo10+J0A\n3I2fA3vs+PYdCESeFxh+9TBvacfrA6WW77v3Vn+BDHnn4ljvH3HOkVkux+1t\n1U+oO+IWghzYyZjT6227oE1rM9AnJxWZCJ2KUqnNaSVgOJdvv4yaeKM9FN4M\nA+k0b4KnTz18+4SZBXFsoApGN89rC5G15N8q8HIAkOmOId/ffQdTYQVJn+SN\nRmfSU8wSThdISNoeHIzfkfl6zvSsZwY3p8aRhCwpql6lrG+z5IbSiz2JnpUE\nFOVFevJGSpVDgrRyAAaOxlNHylCxHBeZ14Xbj0fWhoIAue9mczU2ygOT5pJf\nik+RA2zkFJwduEWFZ4kFLwUGr0c8/fPvBM5/CJRCEOsP+XwXahHg4hMrflAv\n8Dzp\r\n=CXIA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoAWz0AWxUXk9MXSnXh/pa/mQegVfqdeuCpkx2rRORGAiEAiz2NrjX+ODAKeSyiEfkSbuU5xXOvom5OrkRpFAwALJM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.28_1565441085730_0.6042846884175188"},"_hasShrinkwrap":false},"5.2.0-beta.29":{"name":"@storybook/addon-info","version":"5.2.0-beta.29","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.29","@storybook/client-logger":"5.2.0-beta.29","@storybook/components":"5.2.0-beta.29","@storybook/theming":"5.2.0-beta.29","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a7625dec1e6af5c1ad2a51054eff5f6f0a9ab727","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.29","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-EvYaDeJm5jUeii+AWMgx1vG36qcdwqQQZ7I6dh0TEQoJoczKW9HW6YC9WXhlLcHYK2fMDBGF14ZHYR/g+sULIA==","shasum":"15e80a5c0d7c5579a02a0cca96f9c5f2a8a0c41f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.29.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUhCkCRA9TVsSAnZWagAAeNUP/j0hPL/Y+AlLBN5Tdc0H\ng7ItccFH/IiIUKmd/PWSyY4bfdtqiP+ycXisa8jQr6K1TVQcZH0NxW3aThKi\nCn51j3NBIaWmVSuq25QfbgF8cgFNmoYMazZEF7/SdD0L1LRTZKcMxOCMMM6X\nNPa8rEZEPQT6rKlpAWbYuyJ80dfVKSQPYEWKql/4S/UJHryAKH3/e0yfUnt0\nX1krftaIbdjOsRRBcIiNWd7G5Tu4dD9Q3GFPkKfUqdEcX8NSsOPzP1FfxxCF\nPbrUssC1ISkZim4RcEP29uHNGUbXPw4kgw96CAQ/yA/S6GZw18B2dOAzTaNi\nsu0m0Uo8+vLoCEdkTH+24NiplhdnIVn8DU0q5VGnJCLTDaO4Zs3BWRXh6tHx\n3cpjZMv2ao/uVAmBu7gR9fm5YtyIUSPFUMY8lh/ehh4i5sUW89jA1909BxMS\n2jm7Iox7UhC6mX6/8eL6mJbTMkoYDiMWo+5WsTIqTvrdqw32GWPdUwC0bTHS\nsNNwqZ2eqmEDKvlwh8QBddXcZYbbSKu6FTFslpUuG9GCp9vgYDmN9dIqn5Fc\nTc90IGTWybCPOrXtNSMHXnr+gVeTnoCfyxK3Lorh/QRdxshPacAH3IPZDrxy\ncphxnQacbAb8DBNPNM+UGDwJPwKWBUj4y6KhjrhYxNntvL4DXHYDezer7g+B\nUFfw\r\n=wRX2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEbM1Nz/h1cxFkCzkqm4B+sEw6+n+0E0h8NK8LkLmJNgIhAP7E67OPAxlnwn+WSBBS6kr25nNY5CbQ8vAZOIFJez/B"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.29_1565659300292_0.8263250201401449"},"_hasShrinkwrap":false},"5.1.11":{"name":"@storybook/addon-info","version":"5.1.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.1.11","@storybook/client-logger":"5.1.11","@storybook/components":"5.1.11","@storybook/theming":"5.1.11","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aeeafda2de3e97cd91e36c3dc7bdb0543d073429","_id":"@storybook/addon-info@5.1.11","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-hvliF+W4Yz9E23bFfkzWaGGFWBDxlkIh9PsYwFSb4ho0UMCfujLjIM6AeFUvVFiIZm71AnOq8U0+AWPbQ99orw==","shasum":"82cc8e36b20eaac469a171299e64754ebae189c8","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.1.11.tgz","fileCount":92,"unpackedSize":606757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUhhvCRA9TVsSAnZWagAAHKMQAIUVManDCmElBs/KPlWm\n/E0gianmxB6JtpfB97ypOfdvEFz9t5j0ETIkDGQXTN8IryomCB7YvWEeCpH6\nhWUiHBJT8wuxUEo5LBG5YEwhldjADk90UBx4D9+MoWp8/ngF1fB4Va91md22\noUW+9PzicCXxDGnVx2vsWNdH/ItUgBQd5JlxVAlHpnuuCDwTpuzS7WrUUw5g\nKTnLAQQUznUtAysWcPcaGblWFosweJ58Un7pdg0943ojGu5pe/eOr2xw0+g1\nRX+nCi0aaFf2HKEgSjZSViw1xhgzhcdMb25m7JXl+oluYVPc85RfHfBvUkW2\nBkpkPQwa71TWz8vDJ91K1qB84j5KVHLcT/r3xAXN7CE+AS5bbeJ9e+3oDf1o\nOsfaBoZBVsj+k5ec8qaDgNgRm/oJcEBPm6ipjBqvvs94VMye7WAXN8DTbRug\nTLD9sXG67vIRYO6j/OZQg/SP56fmxXKDDcHEtzP7pF8w2a9DCViUWh3EoHuS\nbBiiiJu1JKyEWWrzkRUUSxZnFk6JOl6tySgPOyVOCvqnKjTJiiZvGCWx+Y/b\nVLIBDpPiJeGz4LFQXzj/OsqHkYceYQpOqQQDE4TTr3lCe/xk1lDU7jmhT24d\n6Jl4Mnj+ZxgpdbAonpn1JZSLAPFJpclZRpjA6iszBzkWOZJgIUSAS7vdPnSw\nQtkQ\r\n=pFZ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8flxqdvBlKTGglYMpb63bJhzZDrhjKXzKBkMg43/TRAIhAIOqMNkzs4Q+P7rcF4R22/Z4mx7xJf1+VlgJnZNg9e7p"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.1.11_1565661294806_0.3540134888414572"},"_hasShrinkwrap":false},"5.2.0-beta.30":{"name":"@storybook/addon-info","version":"5.2.0-beta.30","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.30","@storybook/client-logger":"5.2.0-beta.30","@storybook/components":"5.2.0-beta.30","@storybook/theming":"5.2.0-beta.30","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f3c9692a6aeed8aa9580433c0d28a8b3914b3ae1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.30","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-ZIc8WCqXgS6RcXtRlNWqI+WBo/UPrAVVQymqs2M7ZqvqKNHdICkpvRueTA/WMwsmgHMwnhhesWJWDBTbb+pJpg==","shasum":"394a230e9d2759572256f736a35a3ce28f8fd37f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.30.tgz","fileCount":90,"unpackedSize":851625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdU8AKCRA9TVsSAnZWagAAt8cP/RO+q5VBu/4hoKxCezAj\nSCQGJx1/T13uB6Tj3iwsppcauMP4UmaQ2h3Hur8mxBobUnMZG2Y4YsZtzEje\ndpa85w6J/oCodgQeo3rsdt9JZ3chak4GfnccgKvCXwGXftFysWchmgKmin+U\nD4eDzBIPMkY++ZZr8L2Pi1Q0gyufWljerdrhY2IxSgUD3XklcX9xcm4DwmE5\n2YG2nXTaGnnNnp+zVknvAIG3skodyMph6scIH44Qoe6OOpBKIZyn8351fQQ5\neFlqoyDdGiVv8FN7FAQAvuu+F3/srFzbhGKWV754lOuTtSr8tXAuXamu7h+d\nPd+2LF7Q1TIwpKQzt90P22+SVwIE3p4rIkunbQVCzMa3j0nmyqBO0LBM4Ehn\nToxG8plCu8h4xDKl2mkBlUpWLiA0BFCs+w7nXJr8Db0c28eKax3AqfNyOezf\nWfzegxOmbcfk8abWLQ9hw9Ih0JxA+1sQOE4BuvjTZfq8fgvL2BgdsJ8qkgt6\nOff641viAmUuznRGoh9QDSNpvvKRxW+/E33jGqFiorKVoJ5gg78fHyB2qTFG\nyQKk+flQgLmFbKxiuzJK7gKOVqEWn/Oym/2RY/BvgaEHZEXQXdLjswlnNJ/J\ngt68/wUVF+ku5oMT7peseqUQEsDB8Uu14vHLIMYbQKkR3n6zgjU+Yd4h+Pi8\n6qyE\r\n=iIzz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3yulxdyzmG+vklZxwDihUwZPtSDVdJuuCQ+yEbMil4AiEAmH55lWZAF9rRlOmipDQ+Agh420iWNSkYzisLJB2kcXw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.30_1565769737666_0.33695450177347475"},"_hasShrinkwrap":false},"5.2.0-beta.31":{"name":"@storybook/addon-info","version":"5.2.0-beta.31","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.31","@storybook/client-logger":"5.2.0-beta.31","@storybook/components":"5.2.0-beta.31","@storybook/theming":"5.2.0-beta.31","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"eaef302c73969f5dc804ff8340349fc29780d7eb","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.31","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-IsBKPEzHyXnWQV0B1gMLGaAUJI0vmTkk/VEy2Nvuzp0ISOrneycZ+JAf3d8nsdgY6kNDDW8BuCGQWCaeqfI7GQ==","shasum":"1edea663447c3861e9abc647c764fd55ef61b32a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.31.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVoKjCRA9TVsSAnZWagAAZAUP/1Q4GyDHCYjMCConfHBv\nqIfUyMuni9WaCSJc1Hh3uVrGsm8cH8opxK5jx/CHq5mPJhppQEZ6xDdwXjVc\nDGSSIovjkLFmrxbgc1kAkc+OCTk3lqf3S2Lx28X98rYXghRfyNEfNxH65FHl\nsBgCt/O5gdMC4Vbm6aiC+FXerBaXaZ/eeiHf3CFs2ZjjU2QXDZyvBOJNWMFW\nkAhf69wNQtCmABaSxS+oTLCmB7Xdr23wPSUBzsE9XIjsLAd3Vvl6EAsWjiav\nyM3ZChz2qfSZlWyhZFbEV0aL0k1Uhvhej3nd6OI7Ex3z2vpSIZIOXwsXkUYS\nI5dSWSm7IC0cPwkG1+UVrRe1ePY7jCiz7NLNBzYHvcuC2lO9uVFcjoxWuVSb\nYUkD6wcKXYzeyyShonwitNtd2yzU2v4MX7cpszispAu0E7u2+dqtn2GyF89q\nG3pgZwZ+XZJKKlZkE/OrEjDixTLXyGtALLBf6JZ4giLCvjVftgfHpagkFFuv\n+hTqS16+wZLuD+MeaP0SftVPJ/9rR0l65DzYKiCTM6FPGzuVz3zWMGSIe6+3\n85oHGvUPOcV5hKyn7jGdXRU2yJ42wL+XveBSSfJ2DDExKkIo9Tw/f5ZnTzHx\nksvcpHs2FRfjo4i6AHamvaBNtTsoqQ1SptXPb+FcHsC/aQCow/SADkHwuVKo\nnthT\r\n=uaTn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEw6jgpVDA+V1feKcbjjfF+dLXnbGtzFPwM7XmkmcAXAAiEAz6DYgTjBddeSHM2Ju+G6WykFSKt4jW8bKZXA6Nl/DIA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.31_1565950626190_0.502740283481351"},"_hasShrinkwrap":false},"5.2.0-beta.32":{"name":"@storybook/addon-info","version":"5.2.0-beta.32","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.32","@storybook/client-logger":"5.2.0-beta.32","@storybook/components":"5.2.0-beta.32","@storybook/theming":"5.2.0-beta.32","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1c67f9dae7094cf7ee0aad007c48e20cdcb42e3c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.32","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-FRc8Ber1CyBSLfKEq+nUoGJOc0HqmW3dhmurFmllOIDigFJy35lKfOUYFLOPwUMu17ur2sWoT5HCcG0BkXrYDw==","shasum":"b8258231ae78ea2716d40dd8a9766551fb03e58e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.32.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWATZCRA9TVsSAnZWagAARvAP/RiShhCllQOcJK2F/2pw\nOmykR3QzzepnhYcJLPiDjgaovTmgShVo2oNbLwXYUqGCMLdQVJT2uDt8NBGc\nJnqAchlL5xUTxYTxhGd2eHyBS28W+nybhvOMLRagg7Efv1Iuo/0efM+RqzcB\noqXUEe6E/La4w7lI7rOMJsZxIvdLrAm3VI1l0aTFfFvpECgXV2ZoHJMdJepC\nPRlsaUQtGUjL4W1NFKrG1Q6nrRj7PQIdf5Gv7yQED3jrFjnRk7J0czDWka9I\nOvxCWa88sBUujrTVE+XYPCiemIVIFPD53PZUWrPluxxjZwz8bXGDhnH1A38B\n5t6A4jqbZfFgUaHic75rgppxI60+LrKYTmOvBI31ooiORU1EK00nII7Bca2J\nI9KqMo5KkyGmroSVHHZ2nDpL8d14RJOsjuiE2haZ3WBjJdKuK2ZOe7abvAkw\nGYYGTzfoCIQQBiWqdSkBqUActJRTbsvsn12KSlPSAxDU4iaKZj5F+E+geOnr\n5Wxdtnvmg539dPO/dnY8zVjmhaSe3QiDJ2RsBWRSTETWuFFJhjJplGY2wjC7\nTtvZzu2P3pUPqwnujy6kdwpMbxZ5W1HtXReSlDaucb3rmkuCaleRE3HTZDE6\nTo5CcXgE66i/LD8/UU8J7mSpzvdGDZkczp2WDV58+GVh2VO9CDZClCrfDdMv\nWZGN\r\n=2tE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTs9VyF3IC79ZW8jf7p2H5TbSbPjHJgCx4FqGGVkIgGwIhAO1SZ9/L9osighKWjpsTiKaleLmNSpsepzm6Sm58U/1U"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.32_1566049496773_0.8555313668196649"},"_hasShrinkwrap":false},"5.2.0-beta.33":{"name":"@storybook/addon-info","version":"5.2.0-beta.33","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.33","@storybook/client-logger":"5.2.0-beta.33","@storybook/components":"5.2.0-beta.33","@storybook/theming":"5.2.0-beta.33","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a1f0a1ba262a81f20b950902ec845676a08cd39a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.33","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-fYxevm3ECf4aqL6Ij/Ujd7VzGgQArKiMzuz3n/DLYbUIBBawA6DIZIq0N6RCoYXPwpmiO9SNphkPkmJDCOD2fQ==","shasum":"66b71ffb74c3062efd513d538025854661572442","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.33.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWVa/CRA9TVsSAnZWagAAGH4P/2fauVfvS/s2x+HxDsho\nbKqNOu8t/++EWqXWhlTtEQfdNJl+9B1kUfMwnJ3tgno2M9eURttv6SMOI7AG\nBwoEttKGdkT/IWNtMj/9J3rgVnLS3zx4HMfEAjZQZkEgM37+VFQ5M5RWppa7\nqLlBcBD8DK60dcciFu4QZ42brsj+moWIu91w60Xfx699rsyOWffEELATN0cn\nY5aHFW1q60TywhuUr4/vlhAF3esV2pCkCSWHRXZdYYNsMT2jW3EQnteY+DlR\nT3ZZTAkWrkUTcfs+9OviN0vnfd6haROZvDionXbKodue/ZXtpNgwFNYK4D1g\n4bb1BSAbD3ndtNopP78y5dZ3hSiYe0/BU1tFjSGiusysl7CD5EBp+7ByRQSE\nSSSkOesYUNZmZSc3WBIvhBbYgqLcn5q1VYfdilGPFYVTg7Ju8Uo40vUlyJfr\neETfifgqmErHvNkA9ud+gC0jFIxUFR7LVjEdA2h/A/N8TRxtb7JTNBV8J+lk\ns+NaPhZlLyF47h3EL/xC4VAY3ykPv8KIfR1TvZ6GcM1uiS9n47b96RKeKkrL\nLeJc50LrizvdhxmCtDYWkKPyvreofEFj3phAJFBCMenrlcXVo7+p2LKafRJL\nc0JZpJzWDtR9dGWJPKBVgiXbjlE0w8Q8AGpQvTcKzhR6j3OtcbL8kOYnaVs3\nzFVO\r\n=mul2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4VT9pBYzuDSjd8qfyPKnHBcOquA3aT7MizysJT90npAiBuhAgR7fN2xoU75Cyn4qABzzoFFIt9Bn2klrzCDmsoRw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.33_1566135999195_0.6065606078915433"},"_hasShrinkwrap":false},"5.2.0-beta.36":{"name":"@storybook/addon-info","version":"5.2.0-beta.36","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.36","@storybook/client-logger":"5.2.0-beta.36","@storybook/components":"5.2.0-beta.36","@storybook/theming":"5.2.0-beta.36","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2c9c448307ad1f9c7509919daab8d1b99dc36176","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.36","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-qlbsIWwMsbLhuFnUj9d86Ec4Se9fmUJSf/2+3c3ZRVxfdaFdANAhsftPeM1SThyvr//rBCx88q1fWL+ZOYl7Jw==","shasum":"ad40877f9d8305d0a3ab93fa82a1f71789a849f3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.36.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWveACRA9TVsSAnZWagAA11gP/R8MGaVSnA12KWVomTuW\njX/YyyYpeFWDXO7IUwZZB3e1gMg7w7a6GcO0w7SvrqFkQNtkWWBseWx1lA/t\nQtFhNmSZ4l3B6pxGyPb4dbKcKYhTl/Zkg9g6zgZV/1wKynZ9+2262K+Urt01\nMJX6qqbf8xNo6aAUifobz3W9hTvJIEtNKtByPquM4/oKNGBSN0+r4Z9wOSyo\nA7XJEIaGy8SEhvYRUksXC1K7Tfrdac/Z0Rc/E4wZNQOM99ZKVR5kGgt0uHWj\nnzIH3X9XHzXNLGB1CgWt5GFm/k1v+ImtFFjlZCFhM9zTyqqciyf1q9yLOCxK\nq0R5frpJtCnJ9oYzmDSBkb2tQXYY9qzD7319QoJZq7A8uDFIanonqeUAY4QZ\nYUIvIxP0efpQqAkW3n65DE5MQ01O0yVYznUdJobbm68Zgm/E5fIYLXU54y3k\nbed8ptBX4HMTrSXfCUmw+/dH+mDmljpMOImn25LrtRPMMj2DPNrA8YymQtGV\n5qC6GwSJaeGFy4yuHtBQzt25btKdOMe4rN8C4h2jDiSpksW/9wTJiJe71nZw\nPpWcZtnufuZNybDKuqqp/9dX4QvDOWUn2um8MsOHX1gkjEYWBFVznEcFivSZ\nqdZGoBGWNGUk3TZ5hA4m6GJuD2qJHPN9kT2442QvmDQYnaBLBKkOFm36neLl\nTE41\r\n=igaV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYlOD4jMvBiaAL+MqF6Y9d3RfDDEhZi120c9dbWHQrBgIgH9F91G229PSsCri79Klytig8+Zj7vF3LxfPgWFs084w="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.36_1566242688020_0.7036315105192033"},"_hasShrinkwrap":false},"5.2.0-beta.37":{"name":"@storybook/addon-info","version":"5.2.0-beta.37","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.37","@storybook/client-logger":"5.2.0-beta.37","@storybook/components":"5.2.0-beta.37","@storybook/theming":"5.2.0-beta.37","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"bc4b5e8047edab52adb9e9fd51daca2fe3e0fbdc","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.37","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Eeoq04BvYytNAN5SqFxTFse4VIS4Vojo/BJ49rkKnFxGCmkHDnHj4x6Ei3iYXEFAgOZtBjlp55R4/ITEkVd6jw==","shasum":"9f58eab4b7a4eda9df2d900198f042a45e1fd809","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.37.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdW6m9CRA9TVsSAnZWagAAzMAP/jgDQF2OauZKZu5z2mVy\nkgCmVnoIBrSlviXKjpMCp5+pRlqusAndQa0kudtfXed9E3tdLXp9akCxMa2a\n0O59V1yDRm66RIua511/9letzNOIIizXmHIkMvv/eYoUZkrUJ3cRfYDQw1ww\nQhhmWnZXifz1Oy8IlXC4FsM7/S13v7z63ZdgClaoePIPrN9UEBjKlGWnUutW\nI20FoN2+tpiGmiO182hbnfgP4f5E2g4UTC07ROrAOLbyslcKFXIGv5Aqqbzl\nl1DWuOqJB3vaX9jQQgSze/ZjCqwLTOiIJjwCeJbaSfZ/jB58nWZBQ7f4zdQK\ncAjSywLDIxKjMd2Qd0HZr8tdciTtY9Vj4JJu1t2tdNDM2CDAdMvkRpWnKDQP\nWJY3FGLVzRr1cRrOsOsZnedUKd14H932faTN/Ir0+z0RlK37fdXqztSMUxS5\nmOt40jCeVZshAn05a3kO2Ol/wRZr5OibQvFeivzfYpfAkTOgnqHmLlNsH/75\ntLIBQ00KQ0zIAoHlgh/3MJjUNDzMSkcE4+HIT7KFmwr1PzQ953oRKa004r0u\n5oush3x9KaNtl6lqixMAIREI2NNSW5m+6AsOH4QedM+gsZzvD90TqM/Qghqj\nrz0z3P1/SFZgZsI5ZAAFyHAgmIUOBfM2yx6iozn0GmVszBxdgFvrCDjkgC0O\noeAS\r\n=0DAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYV3bpCUgCvK8QxeNck+4tN1SLiKyfxE/mC9MgY0MJiAIgaffFr7Hly+xuLAbIJt1q725gGRcGIs5Ff5JFLrbRBNk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.37_1566288316950_0.2548235631743798"},"_hasShrinkwrap":false},"5.2.0-beta.38":{"name":"@storybook/addon-info","version":"5.2.0-beta.38","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.38","@storybook/client-logger":"5.2.0-beta.38","@storybook/components":"5.2.0-beta.38","@storybook/theming":"5.2.0-beta.38","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6a6537f41351e610ef59e37c1aa574d26d8b949e","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.38","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-BjBxAKnooq26aldgrqnIMAdw9u1Vulx9DqcTVjymhyZ4IBZ9rSyjbfjjAc4cyVdTKlzDEpu+A3fgjZ2OfucXgw==","shasum":"744304df9cf86f0340fb70e73ac41e7793b97ca6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.38.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXBtOCRA9TVsSAnZWagAAMs0P/2aSW+IO0+lSsiLByDKf\n52DnBj4fUsaMfSsdFltHM38Gb0H+0EHQl+H/shx6PN3VgxRJuUu+Amx323Tt\nUxb90oClAEVoryNtY2M2Ez1jB/v76lTT5P+XTp+WcVUT28ICDGKWsyeyWbzy\nbwgDVn5cxxCzlL+E8nclT2v8jC8PK89eeqiO8c+pg7Nz+B77POadOi3MN4HM\n6bxh3Ev+qA4e3Bj91qXhUIETziYUL4rKKIukjbaMdJTy6hhr3G/yL85C8Xgu\nVj4gQsgkzigjz5/jccDzbW6/d07OkjoOc3Y6B/5rR/CI2om5/q7i1rX5pYZv\nMXSKnlzGuFEVcUEa/zdRtSGpbJx6RQf81ZFIqkHOW8qVM9OD9O9KDaEQCbj4\n93aXVj7d7aqAVcoFFLWZPIt+XBqFOxsO01hR/HwVRnMMK3SXZ7iGnvD1mUGZ\nc8EzlVstr5OAlq+5LvFd9clG7ZCE4pQ0qoUWva0BkAjLsJMO8MZ/VnxpXOBI\nc9Gp1n3YrFcATQtc89UG71C+RAKYvJIJQ2kBLIC3F/0D46VHw2xG+Gdd7wsj\nSp76SMhIbANC0rAgj3W5D+9TUENSBn9psNCRkEKEJ4iWUCx3I8pD/jQQBAMu\nuT2iNaVm6vmGvcRQMN+Vw6UrtQgg7EVUPW7GRpD7SGmPhlUXqY3zYrv2cOlr\n6V7k\r\n=nxcL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvcSKjI1WmwhWshq0DiRNQZGGSryY5sCyTRHlcHtNzMAiBNQG8CivqdssVxFovsCPVqXNbwSgpRbJ6ToA5LL2TtnA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.38_1566317390171_0.3146554122293532"},"_hasShrinkwrap":false},"5.2.0-beta.39":{"name":"@storybook/addon-info","version":"5.2.0-beta.39","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.39","@storybook/client-logger":"5.2.0-beta.39","@storybook/components":"5.2.0-beta.39","@storybook/theming":"5.2.0-beta.39","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"29944a6973f277ce5a1bee515e9e14c395de2404","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.39","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-NkODY90WlDjjqZ/DCVgswlsu/zBbrtiNfPOf4C1/iTxOc0F9mPAqe4vNNXqpX1+xLKd5Iv5ODZGhN/epeWjJCA==","shasum":"fc436075bde2c37b34a180240e5c2ac8dd21ac9e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.39.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXgz2CRA9TVsSAnZWagAA5X8P/jgJD2qZmgRtiebe85/Y\nlEoJgpS4c9Jmg0teQm28mt6Hc18J0XU6dOImu9kIibdN6aSgdan9fcEeBSx0\nV3sWwTpRyojKmFDAdxacVpAvYzaTVjQkzcbxnC52D+FnnjSnkHg9JgojV574\n4dn3Qa9i65vxj7nLPsgfJZiGYnyeus+PNi9IrvcReUYee0bsMUXZVE9PKS1L\neDJZDWvqcy7Ay3rk+s0XAK6+PBmY0DLklijWw9e1JGlOkf1pEfZpA+Yc9U1I\nL0m0kCfnXtj4nksrcePmcUw/3Fz8wQL38H1/49giutbl4kHeUtq8RPDval/S\nvIp+DaT1jOmTwTMavU1p7VbzOhdmGivxDwYTNM25VeRUosx2rBZbsl59TDlT\nzv0JKxxPf//R/b+CNH46Kt7siKMl/8CG6Jk82UcYmP+tM5Az/Qt+sf6VmSGF\nZ9XUT7h0A95Q7cdUamDQYFumBr1IpJMKDg4x6CiY0mpshYEZHz5v6Fc71X1x\n7njgKx1vSNLAdyvdK14lMSLwoDPuLlK5iswa5+JzXNEsNHcnJIl6qA5rf6jx\n9e6lWhXkB2Y4yMTwvfneEcYIoEPHEwlpyQUOVTWp5WP0mbIhKKIQq4TD0d4W\nlsv6gmh8Tj9wRTLKBOJ5umGA7f027VcuMEPUi9b0cjqiInvXR/P5RxwQDBCX\nlhK8\r\n=A57K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF9W2RLhs0bvqNmOL0yT7OxQmLGl/AtOOCJYX6/t3n+AIhAL0FYrgbOd5Mx6vnlrxpDkxvkd/YI3LdGGHJFoZaHpq0"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.39_1566444790097_0.9144584984096962"},"_hasShrinkwrap":false},"5.2.0-beta.40":{"name":"@storybook/addon-info","version":"5.2.0-beta.40","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.40","@storybook/client-logger":"5.2.0-beta.40","@storybook/components":"5.2.0-beta.40","@storybook/theming":"5.2.0-beta.40","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"61916aaf92ab3e03fbcfb618117cb275c73b4b2b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.40","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-UV3V4K21HD/V8K7uBFTVs2rrNq0qDZaCUdjGzcxYVi9cVhD9m5ycPXL33zUz0RMntqxWfRuqPRcbo5PiwryX3w==","shasum":"79a66fca45866699486b85d6c1b2de4342dc2f61","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.40.tgz","fileCount":90,"unpackedSize":853133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdX/3pCRA9TVsSAnZWagAAqTIP/0Q8wViOtLeYbWELgg0A\niBuiW0wDEycOwxGbCYzdKNzWT7X1NZUKoHcfMIVkTqw4wU8E5IufTFtvOjx5\nWzSkEexrN6ocu2cEEOOjWFWw8trL+gB0nP9mJwF1xISeOkwu/OtsA6SqDkus\nBM2AEKtmw4LzBsyP5UmiQWh6KQNOlVoJ7T+9/YPx01I872mkF3GifZvfENcj\nbEingiXXVMa7jY1DTUySEVS/y81aI55I8oHFdS7mtUBcbUju/8BBMt3J98e4\nLQNKdeadHm9uTbtMCefKj+qWugEE5OT6eN7eFFNm5TIFbKJB40gATW0buy0v\n9l5PGjmgIc+xOc41ep4OYgB54a4b9gYpjMQa/FRHb1R/4xjBdfCeFehdsQ6E\nZcKyO8XijHKFHmM2NV9fYfPIo1oOArA7unR0LbAoT6q/JiY/M4AGO4owX787\np9e139xTfCge4IHbY2gVQpf9zRFFFins0iwhI+nK4TvAoGhWW58SsTT/rV70\njK5gt735t6lymZ2juHWBB2TKJbM5Gt5yf5bfFWMkA3IW1qtwBKU3lZZtz9pF\nnONT6Xf7JbxVCMXEiKQTt0zUVEg+/EY4qWkMsFdoruCuVMGGDGkMDaH31ac/\ntwlt4GcpaxVWRVM4JRLH9tjHXQjEgiqpxloP3fyWSKaM852VqCAtmDE30Qgq\n77dx\r\n=rv4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDky8EIu7pMhcuoVOs9NhQToHppA53B9wMl9L/kiDQXNgIhAL0vDsToMA3/so7U+Muirh+Pf8xBedqDFntKfKF05i1F"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.40_1566572008390_0.23738044780108725"},"_hasShrinkwrap":false},"5.2.0-beta.41":{"name":"@storybook/addon-info","version":"5.2.0-beta.41","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.41","@storybook/client-logger":"5.2.0-beta.41","@storybook/components":"5.2.0-beta.41","@storybook/theming":"5.2.0-beta.41","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7d272bad69ed5a339ccce4730f267f86f0339cd4","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.41","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-8eTFIoj9C/7kyJTqbHskBu5NjJ1BNdijIzah1H5GbI7l1TPvpL1sO1VXFeo009Ddspc4FyfsvvvbAzh3lvQfRA==","shasum":"e667dc4711da44a45407ab2d6c2ed43a0dd0c9e2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.41.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZVPKCRA9TVsSAnZWagAAECwQAIAwc7uBwGMWBYelaX/q\nVRomlxe0soqP4rvJZQn7/t18q4ytdKfncN4VVwZfPdc1ss1raqdLMjWSU3um\n7rRuOKtYdsOx11XAYZGzwLldw5Orayao6pr8S3a+0AsXy4wno5KKK95hRbHp\n+Bv+Qb/QIlPKFUQSvkQnvRjs4M3/mDeTG7z5UgzEKqj8WrdvYV9rwa0eyhSQ\nzscEjQvq3IZWyBNZbH92QMrdpOrov4mwrwTbsvYTpy3sDA979TMUcsaMYOCE\nfit58S7RsoE5S5H0H7vD3d9bY7ZJFmp9wQvP6hkdNIhDYRKCci17znYwjvJr\nVEGB++gPUnbfjOGriVVeUa09akAFFtSIixKutoN0d6EQdDa302qtEMLbDKgL\n9NWDeR4JJRSQFrFXOoO1fW4E5BmchSoxMx+CNE7LaKJFN9MljZOEMfwUoi0T\n7ZJM2dQhgJjEzzJFGGGD4qg0EkZR8CItWgiFCP5/Z33lBRffp3gbEa862pj3\nkwGvFGDBBdXTArx0m6jLAzNUZaOilKlnWvTLdD8+hAPrf1bLk5/mDhihVVnb\nwAN4zLrCzDIvoDB6SqVGrNRxH81Cx0dPAv0UAQIHiDhTrYC23mfIEVnk2V/J\nglrkk536FR/RRZxI5N9hKI6cqYzaAzMniW+HRpjGgleQwMjum/LeRPKhBx5U\nsQuT\r\n=8kqJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+kUdAUTJWGF0mYVueQIciigOci+4wZ1gJ3jykMD+JBAiBar9EUEoiOWTFGUMdxkJAygo7iUKWkWSb0+dtC2Bd4qg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.41_1566921672647_0.44880458641671583"},"_hasShrinkwrap":false},"5.2.0-beta.42":{"name":"@storybook/addon-info","version":"5.2.0-beta.42","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.42","@storybook/client-logger":"5.2.0-beta.42","@storybook/components":"5.2.0-beta.42","@storybook/theming":"5.2.0-beta.42","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"adcf205db03f39bdf398e3e3066de4fa10636271","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.42","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-pa9Hjr/VvjgwWZ7l+MeDjDiRzGbTgsZultXs82bI4Um3BaLtQH6hK4ERLbxzgcL149Pl2/GaVeduoGCds/SXHA==","shasum":"7e98710359c1170cfc57f37138f738928ffa94f7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.42.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZVpvCRA9TVsSAnZWagAAy2YP/0EU73GMiHBEdOLToJTT\nlFdY6yQ92D8IMyi8MGkfzOiRoXRhR5cF9idRPZQIr4yj5rddlxaUV2ohZ1Pl\n1dGv0a38JUe62bYpJw5aIL+US2jUIi2hhdkTHEr+cQZpp4RzW+D9BK97XGD+\nxH8Zg+hCxri8X3n/bO0xKS5XVIR34Xg1PsniyWoPhxX73I8HJKmGzV5RY/PW\noYtTNpMHOtH8uI9+LDtQd2MdHFs/dT7B8bUkcwqSjf2AHM3+selmBnVWd5TO\nN/h4lYR5FyH0W8BAzJ1dTM/Bgsd4zxGhvyPn8hxBPNJP8BfSMmaHVqOe++fD\n9IaIKCGoMxEmIzCBDBGEL693IcJZaW/zHRKQWXCXxHCWyZGNia6a/F8A/mzX\nxQmJ8DQUs4dHSPivySiZvtJ4I3qJn7oTDtYvZEM31mCk5IpW+CpOy0JmCh55\n7lGvQJlnyI86/MmUCSheAH7ivw8P+XncbH4SnLxFoF/goC03yYN0d24Mj+Pt\nON98g7SV33q4FD9xtLzeqOEr7svF3xPtiKZckM1Nl+fRGFEOsSUTPO64AIWd\nVIzt32qNVp77pULpQNFskjklJpiaeJVJuZZmTIpVJGbtIyRxv/bEjs6ZB2Uf\nYjEPZu156qxk/jICDtc2mP2h+TUO01EaRARLf9ys39FAXVTXkuCDSOPZix2J\nGQnj\r\n=cD+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFu0IeFdihhb62we3f7O8ujLnfyNWPAlLsjVAOw1RN8KAiEAg8xMhMu9D1+syzRDO+c31CMCeCknELYa3YgokFJW9XU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.42_1566923374533_0.9147858913944829"},"_hasShrinkwrap":false},"5.2.0-beta.43":{"name":"@storybook/addon-info","version":"5.2.0-beta.43","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.43","@storybook/client-logger":"5.2.0-beta.43","@storybook/components":"5.2.0-beta.43","@storybook/theming":"5.2.0-beta.43","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0f1b6accc5e132d7d22dc8be0614791a62379702","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.43","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-HF1hHWzj8yweKyKZrhU6jFI0JMVp4/Ojv0ilHXjaeDnCmqwF/p0dGkMH2fJ/DcelS8/2en5CAqcPxd7NSCz5tw==","shasum":"5b8116f9d33e915706f37361525600de0678fda3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.43.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZcV9CRA9TVsSAnZWagAABGgP/3d57WlEgiFbXTiEAcpD\ndhzCyOcd2JKRqj1w2ak4BRifOo+8x0eL9DZXUX1HAIbl8od8kuBduiAU1lKm\nzfWNECQEoFyadb0Zrgnp0UAl8HTqBbeU1NSuse/IXmCxSuD9vbIO+idfxaAW\nh5J5ih1pTBwQ6xtCXLdByIXFnxSCdxAq1WW5CuJuVPAjmWqCg9ad090wKFoA\n3dSd/PeLo7Iep1owjWtRZAklUsrC8+zNmKt/i86ypcAJAfqHcCeU5tCQJO9D\nDM42Sye32akKXjBiWtZf5IpQNIqa+Ky8Iujf69QpjV+5vtEDyla835kpObic\nQ4Tis3JelZfbFtGoOw95GRoTr7rURUPiK3IYwn8kslkgmOfNz5kTd9H6srVS\nSo8UXi7wcU3J3viBw6IZtXeJMDYLGL+lCsOa9KCFPPHBXN7uGNuOZaANTJWV\nhTIZcjOSaQ8EINx0ot+PHbHhIRtfzAWNRTLYz+ZeXA7xrbXkSt607CvZARmD\nZsEK4jDbhBZZHHG3OVwIO+hdIwo87xhu0tCvvgYjIg3vihpTx/7ZUBi3n9NS\n53H83rU57PmEDucCsGHlrjPXD3I+VI99SVEfgLx0o2Wp1FMjIut22f0Nq6Wf\n2ZCyQrRIOR2CvJDpPsmUCVbu/hd87yeZxROGt2Pdb12FFBLzDf1zzJXxiAod\nnooD\r\n=Fulg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzwAfjRm7hAwOPBBqWFUKpMb5Nes7T1NUmqvuB7uuJ8gIgZAFZK51XBXj7HbpdeP+34E126I7pEskyOMkHkymGCrY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.43_1566950781370_0.35833866779412205"},"_hasShrinkwrap":false},"5.2.0-beta.45":{"name":"@storybook/addon-info","version":"5.2.0-beta.45","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.45","@storybook/client-logger":"5.2.0-beta.45","@storybook/components":"5.2.0-beta.45","@storybook/theming":"5.2.0-beta.45","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ade0b7b9873edc8d6b42115aa3ba956fea6e710b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.45","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-7PV7NcvpwNBtdsnPuQOJxH35J78jS97U7Gg/74w3/E8aEpZHcckO4s44rnPwb9lzc3nXppGuarU5WZAHrtp7cg==","shasum":"46a07a9b412c38656cb2b22167f86307c0df43e9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.45.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZnOXCRA9TVsSAnZWagAAZEoP/jSXeGAErhVKZZW7DxFG\nRl1ogKiJ6JQOjWHiTe1+R9odQhx4WO0iopTydUbp0XWeYj7TDx4Qygd/mHjc\n8BEyQGgjE6KHe8t23tOmwKLVLqQW7GuiUfzhYZUEjUxvRV1iXnaXdpgfoCTE\njT7v7qcS014FkMb9uXqOskJycnugPLCfsyjuoAzmfSVqtW+nGrPpcXUlVqsq\nnCDkHhHu5bhMFDLXZwkrMc+mAz9k7N/Wx7SY2uMn2Rj7cRYF/q//oIWO6z5B\nGo5/mJTVQW7GoqHwmzs8l6YakWvH9d3NTmPKXzHnZc0rAjTHubh6p/fsDfuN\n2UxNI0fIMRpOg3xXPin6W3BxG30Zw31cFDfo4Ku21Gj0+W2uCXGMEdnu5mTL\nKVtuFusj7d2TDCnf694G1zw97sfYtjf/s+CeOnFU8UnlRTRQkUSnxPkZZqms\n0byEdoMB4+DDSw5LYVrgrZ6yeo/3Nxq9Ki1U8gB+7QzIx8bu5r0EAIZKavjf\n1NLF+7cPwXghrexGFSF9Z5P6KPIjbM8yRilMiyBnSCFIKxSwr2b17KH6Q9Md\n9Oh2/vGB4SCCSo3sg8vFeo1YINhLcTkOR3XYh7wg0C7w/gMXo2+1Rw/evf/O\n59C4oCPRP7ToGVH0xobwuGywWQnxt45Td7fC9k4bBmrk7ipAotAGqd3mnknN\n3+uo\r\n=vfvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz/pwzNjd9bF672xpg9R184kjvWe+lGL/zjl9sfORxjQIgJp5sDFAEem2yMqwt5/v/wpKJwbEd+Pw9XY9pLtbOJzo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.45_1566995350996_0.0744275426182135"},"_hasShrinkwrap":false},"5.2.0-beta.46":{"name":"@storybook/addon-info","version":"5.2.0-beta.46","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.46","@storybook/client-logger":"5.2.0-beta.46","@storybook/components":"5.2.0-beta.46","@storybook/theming":"5.2.0-beta.46","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"30ad57a07ea4cdebe4cd1cf433e78034064953c6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.46","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-oXDXsEa9dsGPzoG9kS62i3mnFtRZGKJyKSuClgYF54ObYj3Mysk+kkugi0D/j4fq80zOaHu9MrWLTRmGInz/EA==","shasum":"40db623591975b6d13b231f782f467c1a9bb8c1c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.46.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ0nZCRA9TVsSAnZWagAA7MoP/RvHdhwU0rbnlAPML4pc\nEhi7YwYb2EVrROgwmN53Djih1NoOS6iiSUqI8Brq9+Ksz2M5c0aGS66rJ1uJ\nlKFmK2+ZQwPhmlBxozeJlh9M96qPD6hPX8UQx9qQGdgd8eQkYxoq2HLx9xFS\naEeoFN+cPaidCTrN4fbT94geBCQ8InmCy2DdXqJMqceEPpaDhZB3ORE5hMCf\npPifqhKQC5gkSD12sNBNBHQ84nE9ReB2nMRDkL4u0TjY5cmbHgeZMY7pZpmU\nGcAnM6Kd3qIWGanvaMtWTMqJ7dC8Ni32uRtVn2IBnPmKrMjxZb8Wv0wr1dYi\nRAHvcD06ECXyrsPiZacT7hwP1U5BhrTCpsKJru3TjBNSSW7FTQxdBYPNuQmv\nTumXen4GmYg6xTdVhvI7iitemX0dNxoIuQdqeEe0g0E9Uor8l8i/8i5cHcs5\nsv7SVj1wDYn+XN5jQN4OnT67lbZHX5AsggNjOkBl1cSIYI9fB/ujfTwx0aD7\nZD4yyCLYR5I2znx+qbJ8OJwyFZ5YJ/W/cQYPn3CGF1VVGUa5TnBdq39LXXl7\ny2MAzMqS5FAlVDBSxTzTbBD8FakHt3FfkVnNtBhAE4iRDulSVI9F5JwRaAWJ\np3Ij0nU7Yp3OpLrG/dH5NnlHMaMQnEQjJCAXR21nyQshR0a/Bi2D1DP90J8Z\np8Wz\r\n=QUXx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcQVPBzEyfdC0teKhBVeAKQclYBOC8Q/Z6eHbvEHmuRAiA/fi/jO5cqLmFXxnqbrAxVBpsWvYgQzqqh6ouHmKp2Ag=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.46_1567050200627_0.33489872438928003"},"_hasShrinkwrap":false},"5.2.0-beta.47":{"name":"@storybook/addon-info","version":"5.2.0-beta.47","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.47","@storybook/client-logger":"5.2.0-beta.47","@storybook/components":"5.2.0-beta.47","@storybook/theming":"5.2.0-beta.47","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"91943299dc54b0d0c896ac44b7109025245e9fe3","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.47","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-MwtqHRqso+NmN0q9GviFyhvEdUWnpezUrnwkmRrsprarB/Ty6QolBIFQZcStkS4PIf5SNvUMlpI1nSr05fddbw==","shasum":"0a137207b20f116e2f752bc0a4cefa085d726498","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.47.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaAJACRA9TVsSAnZWagAAsNwP/AsgOVPlzbXQD8JmEz+K\nmKxhetS/BPFvi/BVRTuDM7Y2vcurHBH++Vu3wStX6S7mO4jU0w+gW+7DTZ9G\nJMOzoqbT9mTeLe5weTCoHPzcZKAZAY7SnFzutN1ETVgrb2zeMRwM7Euq91QQ\nhb0F3umohgx/RMVrbO92XOYXpg5BnirM7nrgcCU1u+3Wrjg0h3j5BrF6iRZA\nwbF0hqQJjmN4oWhJv6OYxnu7bUPqhpYP8TaBfbUks1ES1ly8BfQcC7pOg6k+\no5YeJnmfvEKGv4Fb4DlA7fKeYeJh8krvvm5tW2FxioQia7TFxfVsJnZXVNEO\nCk6PZTQ4see6i6e9DdST7JRGoyrsWPVELikkvg+bcOhr86mxYgr8FewoE9MW\nj8LqoNWazdTCspbM5+uSVZJtTlnkl4aLyW1AtBOEoUeNFLXVY3vP/jMiu8uD\nYeXQdgPAZyCDhgPWTc7Ab80kSC6FixhjEtOFZn39vgq3iv7Dur8YP7jhPt/V\nL1pMk9Z7v73ijTMcx9ovzEzO7ANJppHR3xc6dV8Y6sTq+W+aCpOxSFeION9r\nCBu7Ev8fBX0Vr6xnVHiT5bTjXT9uiuRmOXR26hQzZfmch6zgs73zZVaYum7w\nnfMLa2+6sIWMG2YOx9cCdhPUidx1tmRKOCSs80ACCh/dxHyJdcTCHaMOS5LQ\nY6bA\r\n=mj0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHj3oQQS33zohAh/mNrRq+8m2emJub1GWKg7DgLYCeZAiBiDXs6BpFxIHW9y/d7txKW9zY3MnHrlCaBwlitenejkA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.47_1567097407150_0.7525479421800265"},"_hasShrinkwrap":false},"5.2.0-beta.48":{"name":"@storybook/addon-info","version":"5.2.0-beta.48","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-beta.48","@storybook/client-logger":"5.2.0-beta.48","@storybook/components":"5.2.0-beta.48","@storybook/theming":"5.2.0-beta.48","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"be34be9529d2554617832378637bad0e53553e90","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-beta.48","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-oxsxKigZwcwZyoETclL5LyfQEFNPMbUpbUzrNC477LfnogNpPfGcgrW/KGXEr4ha71old8i774vWFOUSLnC7jQ==","shasum":"ef9d036e78085d17fc07b56630282d5c84299be4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-beta.48.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaKOLCRA9TVsSAnZWagAAZjQP/jruzsfsudVXYfGK2VyA\nx+tDBWU30fpcU7UJfSsy0hzq+IYqWSS54fD2yT1BU9Yht9un5f8NBDxNAvbC\nfjPgNOOXfkztNNvcY1tqCz886hlHSbdgXgvJ9z9Ro3UmKLtveXToDsQhJz1f\njIAn9+DDO5/aZJD5V2msJSno79EL0UZbFq3KV7h1lYkgC5Uh4q6YDtocRvCP\nKYXh+MyW42dutL6GK6oyq53T58OYZeqWwux6+UHkdG23mVf72jS4LZ6eC/ev\nyDnLXJ+muqfqn56M8/JPOcP3m9Eq6mAQLA2hhXrRj3iPxtWYap2OIrag3gAz\nM3xZ9RbEJl3ye0QWopIPZAaKc1Iso39jkN8XbQ1Jjh4xXIIxP7F6ZYG2tw3p\nnldljGNccbtpLmPt/Vft1ZIKhLVWLEYbRLf+lppaV60FPjEB2H1tsIgjqaB7\nCXrz1nfKY0DEkl4HcdU/eNGPQ8BD8YZkzQfsBuyBg6T5ckqohvP6YrqCUOTM\nCsLAUBYj6w2WJ1VVoEXfD+MwcJdWFPg+9ryb03azXNMTeRxrACtDS/HSatIP\ne6XwkjQX/HWqblNb45US60Tsxixjfn9UoADYseekWwE4yW+IqBOyRUHitYzH\nC4wJOpe6MLlmEKm9vWiq+UAjy72D3Sree9av123H6c/DA7WtMxXafqvULjAi\nluA+\r\n=aU2a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbFN6BCodHaNFoxu0tVk+wte8vfllCnZFJ8chf1SFLBQIhAKSTC4eL+KKljOZMxJ0J/Wmsmcu5hWbhIjqbjztDqDbt"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-beta.48_1567138698770_0.7489121239500436"},"_hasShrinkwrap":false},"5.2.0-rc.0":{"name":"@storybook/addon-info","version":"5.2.0-rc.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.0","@storybook/client-logger":"5.2.0-rc.0","@storybook/components":"5.2.0-rc.0","@storybook/theming":"5.2.0-rc.0","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"69af3ae2d3a829e6e010fa19b4cc927096d6d326","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-kHxodyMBwtaWbX1fNKWKumgdvS3JR2WO8ca1CKPqDWNYw1BNg1EGVoCwx80PcdusqzOdko3J5eisHSeC1D0bgQ==","shasum":"95be357d38b623e9a832255d1809262d7c70b032","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.0.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaMWOCRA9TVsSAnZWagAAvjYP/j6TM+Gc0UJz6jpXTwsu\nnFZBMn8cu/vNygSSK76zDd8TT/0qQ4ZfUaZRto8kjRQESs5/9Egt/bFgG7LA\nU5WNOq5l9IfxJ2JtUw9hXSlyyy1e969BHA7SAs4/ay85uqZyPSlW4fA7iSNX\nPPr7nzycIjtE8YcYlptVXB+iskL+iF1qLq8Sw/6a5EUY+FTKIvwL1J9vFrf+\nxaU1PQal29+/xqTXkRHEIbbF+h/v/K+BcE0pYBKatYDnUUtsFX++CnAPEjxy\nJRzmmPB49p5APo5TQAt7Hceh5KGtz5WNAKCiHi88WA6QEzXVYcyJ6CnCpfzX\nPPvFNQgqciloLFzyx7QulQ3BSNn+A6BaqsjO2i9+mMP97gCXil/ANhBv0QUb\nGpClTsGkvdeN7vqNQfctl4saWUFrpS6Ctiuxrgx5Pf7Nq8CcRd8fbIY+fLe0\nuyIAcTnMQforSqL0yTPBRWz8wvlITOgrFNGEJzbyvKlASV2G/PzTn4P7hz5b\npwLyGExgydCy69YqIagpim8FIMFfEBx92tOVZYtCNecdzaRjxSxzcwVulGis\nSO6vhgEzjgRhmgyo9wtdAKpM74j268TACe+kCT65BxtvwjNXyrCqo1l6wtJl\nfzBpHKAv0vUja96gVH5XY88ycV33m2IZKSTnv3Q95GHF2bfzdOi8eSZFj1p2\niCUY\r\n=42vS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAa8iuVjfkspHl8fwOANj2RupSlDbAkthY3nzRSZWxtkAiEA1VpDkqO5rm4KQZeMmUoIIC2iIxIMUsHdRd+78ObfFW8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.0_1567147405384_0.040753511802421594"},"_hasShrinkwrap":false},"5.2.0-rc.1":{"name":"@storybook/addon-info","version":"5.2.0-rc.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.1","@storybook/client-logger":"5.2.0-rc.1","@storybook/components":"5.2.0-rc.1","@storybook/theming":"5.2.0-rc.1","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a5a9838c2926d634f3865affcea8a4e2b19cc02c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.1","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-wFBQphMJqlBMGvZmj980dBnJtZmkTdalaC7DpXjBN7TqNONtUhm/mzf0UAO5XnnSlQzjVjM3yaE324iz0NZFPw==","shasum":"68b43b1494d4180240f4f3b0e6168de7a6fd0deb","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.1.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaeISCRA9TVsSAnZWagAA9BwP/RL1pQXGFGpxmuUoBzcz\nwdg89dPmTw+ebA96t86ddWvSTYGZ7IBVfIIsG2+kQnlixIh8Yf6BI+0PHdMd\nT4d6yIR5qmdMF3LBjjod+bt2vQqpeiHIAqE3pMUo3wL2T5AdQ025xWSYjrNG\n379e7npqewG4jx0n775te5g20wAybqM2yQsmy/JS10xAzGBORqzzP86hEr5M\ny06Kn0SLM+FHOTpP1xEzdFMBwMTSzGJy7krX3YTOIzew/Zqx9tytCeJnMO3k\nNIikQtzr+NWd7o+3YF16ZS9ArgoqIqcJMJi9pJ45WuPMflYQlBEsN/ko2Pcr\n1Y5oMO4v8SUYmtYURwcDH+2aTTJRG9w/y+UK18intOhuEkoJPphGwADZkXq0\n0nnRRxCknwBKAR21wJvzXwWBipAzXZcomFgMDuDn7jsGE8LPh9viT48qAIAB\nKjh4HIVg7pQIon8/Z+C3JwfE/Q6/yy97UzpQBRC3be6gYQfzN22VllkV2Q2a\nLbpwGrg1myhY+3s70OL61nSBPmq/t1s0ARbiBmEl2eiX9U1ojlHjxLYXOfGw\nBxf/OTgJAzRvTH73JULWTlgv/mApFogvNWG0fN8ouobpk1H8OV2QtapKKmJV\naQJCy0PQ/fLPt6yBIdJQlD13Hr7fipcog+GERTvxurvMFz9e3fBi95UtTZz0\nyS9f\r\n=k5qO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/BEBEltfeH5VD4Jwg1BRWeCcWt7DwvymA+FzUvuuC1wIhAOWj+oMCagBQuOJqvwr0foxA2n5u3ZNh6rJ9k48Tq8rJ"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.1_1567220241922_0.8131754841394527"},"_hasShrinkwrap":false},"5.2.0-rc.2":{"name":"@storybook/addon-info","version":"5.2.0-rc.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.2","@storybook/client-logger":"5.2.0-rc.2","@storybook/components":"5.2.0-rc.2","@storybook/theming":"5.2.0-rc.2","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f59b9fc0fd76acdf75de9624eb08df4670805596","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.2","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-egmYQaYtBZEke4Eq6I1wzUR+w47pfai7aszLKdQbJS8AkZXl18R3FDl3dNL71z2nhm8jefbLgxTpXb8aswPclw==","shasum":"00632ab8f86b449d70e19a44f07990c3f29336d2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.2.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda14lCRA9TVsSAnZWagAAqPkP/AyYMVvP61qZ+NxLXyBx\nJNXP/QeaPKIHqKXK3d8PNRsaULMl1XWG8i9gC6kqxwihVClf7PWIOG2AyfO5\nq/dre43xmGdXyjshm+tWrdSIqzk41WC0+i3rtvikppzR5UsDhXXcRaqi3I/S\nhfToyiOaG6aFdvTAQES+rwdxF9S1+kAB/3z37DSQ8tQeyzmf49g7yyRCmxq3\n0JLeZrCET3P1UmK+wHDCK48sUn7TpoIzcdTU6Vr3LLEtAFe2q/2B3Q37Vgi8\n61AxMlOSGFswHfqXTM4j6xxuu9i4EfZ4acpzTH0+VKdZGvTvWBT/bzMXjD8D\nVpgj0Eth7oYvFdIoa701567trvgx8Qjne77XDue/j/dvMKouVUAjX+S2Pyi0\n7kCGPM7Qgn6bDLAtCQGdkHTfmIGUzE/PXOpravpMYVpXSGlhhCFg2dINobw4\nPCD9q8hAb8ARiagYJWEb/5z3uAB4A+1RjovH38wuq4i02fApo4LVwFNgrwmk\n9WjAFsLh1hT75La3H2hCLDbZc3whORZvjT0dA5NmHLZR+vURMb1ixZw3qNAZ\ndhJBmRSB9JYuM71eKw96/Y6p3VjAHLJ6JR61i7MI+ag1/o2xBU5V597juDyE\nsQdQG+bbzUMu3rsonnA8jBpPwpbBHY76S4r6xkfwu8N34vNvfXmK5a7O/WRz\nytc1\r\n=PRZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtLfQdzQddM8kMagiRPSn6jIRxTC1ZVrjK47bKTkwWgAiBZw2E549J30S3LVg4djfM4LTnoeo2P44BSas77YYUZkw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.2_1567317540477_0.7128265650427998"},"_hasShrinkwrap":false},"5.2.0-rc.4":{"name":"@storybook/addon-info","version":"5.2.0-rc.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.4","@storybook/client-logger":"5.2.0-rc.4","@storybook/components":"5.2.0-rc.4","@storybook/theming":"5.2.0-rc.4","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9024c4068cd4c8aade6b3ae7a02d90092352cc62","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.4","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-+kPGnLURMO6NT/mxdzugPtCoJ80lSwvYOOdl38iq6gMcEIqPBC6USFj4vVpMGH/eYHGE4u20K+MT4rYU2voWIQ==","shasum":"c5ffebd7c2b1ca45c68d6f39f576b62f50aa0a0c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.4.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbjisCRA9TVsSAnZWagAA0ksP/0WLrsCGmuQ+eIRObIxE\nTYzl+v4zKrR5LlxkpKIqWh94OOHQINoPBwcmO4JVCpUQojnxzJmz5VM9IpPj\n0zmKqqeEgFinj/Qa0QJkTbHcK5NMXBoN+ZYdPIMMfLMzJr5sVDK3HKfk4Ywi\nzIAhYdR0cfgc6agHy1R3N/7dFR5rdiuKpdRPI9sAVuyED9QTOfgzQ4JfV46u\npB5vCdlq2KKOaDojm0dBaiWXPbQCmdIeAYGvuVKe3edTbgwPhSFPPNmhVPpz\nVerQe22+7Zh8oW8Kq/gEAf4xnr/PlAus4J+sbDVWkyBL1QynPjCzEg74eU9a\n6BfLRBhAGaSs0Ult5iqP69CFWXz039fj+U8okZzsddKoSAa2ZZ50vP4eLb2F\nWRcF2IvGZl4AJR0nfFCZ9PsOk+MweOBXe2snDX0XsiqlHrP6gEf8z7lNrnDi\nazYXwBguKSjMX+CbhCNXPn3stG9cwXblb7nugCWxGUkifZtwZm9GIY5zZ/9v\nymvB4cwFmOPDxjLxcM/WQlX/le+PQKSEWwwKUW9rkHJwpcq9fL3qrpGXbcOx\nxGDYj8KJ6dbqvC9cYqIMsGvA2zlLBlVHuN+KYZV7AvvffeVO4mztPvVhxSKB\nxxMWZ8iy+9VEotX0qv8rrFeGlB/NhtN+n+bEsoiIsSR0zeEWmqMvSoEt8aTX\nZ+Fn\r\n=pzEu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE0oAX2zCP22ayJ6u9/IY3aNy1u/CH3RJ3/q0gURda1QIgPEDfjLtARfs+cGAQ/sPrcCckSZlkqSEw5v97Pq0Wsy8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.4_1567504555816_0.5070000520128382"},"_hasShrinkwrap":false},"5.2.0-rc.5":{"name":"@storybook/addon-info","version":"5.2.0-rc.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.5","@storybook/client-logger":"5.2.0-rc.5","@storybook/components":"5.2.0-rc.5","@storybook/theming":"5.2.0-rc.5","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2f64ae316ab2bebb5b02d8e323e121ee62ae9733","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.5","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-NFt7gpLLmfHVLa5rytMDwDuoccmqDd7IoBTymly24Vu0tGl46M0ZfmBAs6VFx4AbIVrHT3EnQhQNJozpb1P6JQ==","shasum":"1669d53927276b4070163974e86c7dcbf1d25868","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.5.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbyZ+CRA9TVsSAnZWagAA2LoP/AvdhWOsMo0Efhf2/Kz3\ngm3YGxYatkiPrnHB1eqBoMHb4ctUHxs0eaTJj5fibRt+DBF9IMMH6X6on67Z\nURHZUPLj3t6ML7Dg5JbY+n9p/VRS7kCuD+2rT62U3VzD/QHp0dnWmuXhIe56\nqYz8WEC6c8eLGT7/Z+2P3ARVggdbCgOO46qPVxneX2BG/KhiuPNRXXZNAoh+\nlnGYvjT7UngN6iQejfW4xVhgWYLmhosIXXoVagdtSl1+IrDiFB6Yhy1IBwRB\nUPp/GqqRG/hWSW1eNbnAqY1OnNt77LkPiGGhorWudagm1hPaZHdVWdxKFcFL\nF8M8dT28OgWdx55B1one3TxGZiXAC1WWigje+Hpi2NoQTxToe+1eXZUlcUTO\nMAr1f4sNBCx1QE2PcOJIUQlWpslOGgJJh6pSJxoXTjV7TKWkjm/evqcR384s\neHRiIFrDgvyXUQJ+pvjaEVKaP1TLMd7cJUqtsilb7YJ4eNeaGC5HCN6zY/je\nILdwSElTZRGVpam0w3O51EUYfWuWo2JnyY/8MMksCMtquCg/9LV94/Eu9RNk\nljveVE7GHgppvjv+UjTKps7or9I1yuQT0y6aOyv7HOXD4BfzhiUG57CMzi3Y\nAXHAmEg27dQ/almiV5JIOEJCKCP8LoSp4VVeJiFs3yQphLJAI8K6XeR1lKnn\nqgDs\r\n=oQdA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2YltPsmDJVTb1tnDpLY7TiN4h8+0BAv/x57O4JalcuAiEAtD+7zU3YP47g/wcXs9X/3FC26UUwAY7vJzgAzozb3cQ="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.5_1567565437998_0.2545036580520934"},"_hasShrinkwrap":false},"5.2.0-rc.6":{"name":"@storybook/addon-info","version":"5.2.0-rc.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.6","@storybook/client-logger":"5.2.0-rc.6","@storybook/components":"5.2.0-rc.6","@storybook/theming":"5.2.0-rc.6","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2ec478efd96f91f6e6040f455e18fe0927bd363f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.6","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Ej7V6/J8J/TAv+sx9ffrSOGB1JNr17r5YUpkEhy3b0QKnywV3sLxRhcN3mrTc7udVsPkibW8D0R2jGUEUoRCfA==","shasum":"745e1dae081e00407c7b6b69c72ffc11ba20b737","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.6.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcLBgCRA9TVsSAnZWagAA2O0P/jLQqdlz+empXhG7jAv3\nwr00NANjEgrbQ3d/DcVNYENjicZ+LPTYmLOq/twCz0h2Lz75l2V29EmHNdwP\nPa1XrSp1+Vr1I4t3dBECUSt6riCemvbtcnrSEIAMzK3hJjjs7q6qRXAh8/0Y\nbkzuWuzC3A4LS+m/80VzfPzeLSl9BTl56Aymve7QVYAgNjOUNTfNQ3cKNHX2\nc/9Ndbe2f0878vc1ovHMxVkkG6T/sFRXvGxRUT6D1UvZXr95jJc/LVQvuF6g\nnUG0NWEtHl/JnobRDZr/f9fgaujYNOwFQOyA4ZaUEPYaTF45Bvn/q9wDIOQV\nl2Ujl8NbhDOoL6LH/oBGWPCHxLjP0OXxo39u8ce981/ujv4n6ohJDKdtBXzj\nv3MK3Pkc088L8p9LRjsOalM1T5i68sNUy64W3AGI4il3SqtKqU9Pd9WVPmrF\nX/CjUM4Ja4OK8uUXG+dsa9aM0+gdAraM5A5+HWFOVAlr5SvLY7+aGnQcFPK/\nQ+FUtQLO3yAMJXm+nQMNVWt5iGPzJsu7V/f3JVEsUCwRyBuI2vvAQfuFH+nP\n60YER0TFD23LnF/xKndsdJN2XRNuYllTiSbZq3nd7bKvcOq/wX3Wx2zV9Tkx\nz+quID8R7jOCiyd+axVN8vl69BGSVodQJzcVTeEWObhJUsWHGyDa+OPrqMSQ\n1bAD\r\n=ER4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKvks6KoV3eTDcvrhd7Xvkn8mymLqNjnqpuQIBO1BfKQIhALbxIDcxkh7HNbqskxNRUYEeHU5vxVAVqvzCYGWtO15X"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.6_1567666271476_0.7800839962028738"},"_hasShrinkwrap":false},"5.2.0-rc.8":{"name":"@storybook/addon-info","version":"5.2.0-rc.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.8","@storybook/client-logger":"5.2.0-rc.8","@storybook/components":"5.2.0-rc.8","@storybook/theming":"5.2.0-rc.8","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3574c5f8ce2366d1c92d6f34ebab84ccf162f327","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.8","_nodeVersion":"8.16.1","_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","dist":{"integrity":"sha512-9FNlUXW9nd5zGkItCgu6BnWjbfqiH/rtUH/4KphEdQd2RfH9rbroVLUC3zGIYjnpwX14F2VzpK2117Q9DqHEiw==","shasum":"5652faddd7af8cf95f258d4b70e81517961f9917","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.8.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcz55CRA9TVsSAnZWagAAya4QAIV9VR9l19K3wnFH/WTR\n1nwacB6AR3axMAPx6fa1Jj0BcnpxQaq07hFZnxsCOQ1+xljeXmJai2WeFULg\nfsGSYZ8hbaV0UhiNoC4APM6FQb9tW0Uribe6tbNZ9J31n5Y5oDgvdoNBiy9H\nGK0DUC1K9njarMDRFHCtY3KGeS2W/5KCqtuost5WYLvRNot0bdPsThYcyEbS\nfARY1K3oVcwX0JaRrWDyexZeMTsfAnek2rNfzQeIeuEgj44IT/c8AByPiZ+V\ng22scuXIENPeYKVirn3PlAOKZuE6XLrLBCDoEQuz0c6eBM/W5WRsynNEU35T\nlptksXgHuy0e0w/z0y7Nkgsaokt3G3Sm+cQJECzQQ3nmxqXlfkUD0I7wNfig\neIQcBOdW7G/7OsuEaK4ZrdEN84fxjsyU22AMn+JbvCKYoFC26KzxwlMwXPm2\n2yCMSWkSHd93ke9oz10VmtsCR+3NUYhG9huNyX3S0EU2B5JXWelWb86I2a0B\nhLfRhRJubQ8B1RpIFtmXi5PKyTX8dlkJw4vF3jcMh+xCBGwP2SkUvEnaIrjj\nR54IIj4tvrrTWsMGqhDHlTmIjDgDBNLnn3xXHy2xMMr4qHlSYU7lp313+sHa\nO3aXamVW76ZkMx0oonHhY/CnhK1ol4jtgKrgSDHKHr68IENG6dGB2zov0ob3\n9bwg\r\n=xMgC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn7JHrcGWwY2Wi0Ae2nbMYlc1YxbTP8JMPdYn0pmTbDQIgI5tRild4rDtkDLuDTh7OQPZmQHPlZ9Lt827hPR0Py18="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.8_1567833720900_0.5362719903258382"},"_hasShrinkwrap":false},"5.2.0-rc.9":{"name":"@storybook/addon-info","version":"5.2.0-rc.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.9","@storybook/client-logger":"5.2.0-rc.9","@storybook/components":"5.2.0-rc.9","@storybook/theming":"5.2.0-rc.9","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"90e54468ce99029631bc80b8b1907ce0db8cd6e5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.9","_nodeVersion":"8.16.1","_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","dist":{"integrity":"sha512-j+KE1Y6TuOSai053DWzfuvZZwSk5vSunyJJgczy25HhUPFKRpoHHkfYOsf4iVi9OJVvbzX8l6gVy+JGob4NfhA==","shasum":"6e38fa892dcd0696ec930ae64f313a98722ed5ef","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.9.tgz","fileCount":90,"unpackedSize":854244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddIoDCRA9TVsSAnZWagAAV4MP/2DyvEnjr523uEq2iy/h\neZfEDToKZtrCae7xt0Eo29VNXKQyNfp+uZ8zSY/M2Niv7uYR03b4U3CBd8mV\n+S8rwhR5KxOCJZAnAD/jNmR7fkK60IBZEriL0yam5Bv3Ub7a5wz/zBZR8I01\nWFODYD9MIr4etMuyGAjofgcC0HkCCrgEQ7rlchVeL5k27nf9lthvAxAc1slO\nCZ8m+y42rNaItEshLUWMhFArJ5sumPB/5rR0KfA8cfyQr6dpahsNwfG6nSof\nSeBehQn/pupM94miEl2mbl1EcfR1enyAVgQfKHCUqAxBrIJGVfN2dLCAREhL\n5i1PP/qeTCTj6Z7Qj3k7wrzHZs7aU9hp+10zy2BwSD/eNJ/gJ0MwRjfYZXth\nO/41nNBPkAghRoG72Sq6Na+ahevtrTEIvArGVbSDEbG9Hk8jYvyAMKqGZ28Z\nwn5sc7NjrRmlkWkG5duhVSk0/dCJQq/16YNlPUh8U9MNvfuumlzF/EM9cr8u\n1FE25rpnKgb2Y6VVV30yZTo/XzVpA8ZqRDdTJO0IbQSKwLjuYumzO0Qmtsd0\nasl2CDkqK4jNg2K+/qpK13NNB7zzjogAaxLdysZOg7tWr9UShWOYFWBdEmKg\n8x4GzKybQ7TeMxjmdygyyVOMEDNAv4s6v0mVcB9QVHefg5CEO0ldf0mJl6HH\nxyY6\r\n=/y4e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX4Vm8nkWzQ9Q5pU6nho/CkMLCe6FAjP4Weg9EJDN7ywIhAJPixC/SvhuPsYMkbIiMw48i8rrTROSwxGLrIBEO8Dpj"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.9_1567918595152_0.18370934045941234"},"_hasShrinkwrap":false},"5.2.0-rc.10":{"name":"@storybook/addon-info","version":"5.2.0-rc.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.10","@storybook/client-logger":"5.2.0-rc.10","@storybook/components":"5.2.0-rc.10","@storybook/theming":"5.2.0-rc.10","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e22ff44b2c2fa62bcb9522e95199dc734b72e7fe","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.10","_nodeVersion":"8.16.1","_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","dist":{"integrity":"sha512-LTYh6imEjhBz/xnkcauQ6d2sGQcSwvYBVLEDvRDlXvD13ShnIGfmvpnXKHvfHCRUZlEC1Nd1CeBHc+acpL0ZJw==","shasum":"5b7af7662c96451da42bd20d3472d1a5a5370c01","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.10.tgz","fileCount":90,"unpackedSize":854249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddss8CRA9TVsSAnZWagAAUpQQAJdjEKbwRkGyBHxck0Lo\nMw81DXr5DWEv7XvrRwWbru6Z9bcv1C0QfRviTMveoSI+INnS6CkumEQORJAk\nC3dRejhTtnPd8Z1oQymZA3W1SSkSf2B4q7yFzjw+VvQv8aYmSqfGZlDfG5OH\nJ2oJq75PPJD2uD5wpngaPawtITnXbDmQ0u1sKBE+KH8orbfxinKyFXD9ECa4\nYxYTkHd01afmeVdekLwPNWCRwdAEcrfPoCrdPQplMFk2pNtt8CfRwBo0PC3G\npOIl9yLNqILYPJ3tbt/E6VT3Cm1k2ehiNp8EBIk7Opt1E/2NSGjVsqUe0CKO\nTTpJITCX4ekIHEgcXVG/LkOxfJKjjBKwHqsP+JP4rz9JVJUYtGQXTkdkt3zD\ntfQgQVljhv2mAGFdqicKCUkPGBBY/bsYqgYodtPKnjg+ZVbCYZ/4Tt+/pl3o\nOqNbaxwUBlrRBhR7DCnXKEI5OH404vqTIHGMa6b323Jm7egG2RixeNne7/Bz\nNNR0hj8W9yk9aL+BRZA0b25UYOl9jTXtIMIHaa2+5RamLKXApcDvLkc//2S9\nEjwQfw53MM47IulEYK0la0BrpIE6JgvsQevayrZ5WKMNoDMzYyEaLGkrB45H\nFE++5SgTjrkuvkLN5Jt/vxav7D342bXx4aVVUH6XAKVOh4fwsr/x2H8/lNjV\n5qIG\r\n=T0LN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Jj3pBPrd6zFHMEH1NijIPzixkbZTSktCt/jsO133GAIhAL2R/86WPjPRTWd7lgkMUDJNyKjCWUcLGm4YVk5iLrJ4"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.10_1568066363851_0.9813297822099638"},"_hasShrinkwrap":false},"5.2.0-rc.11":{"name":"@storybook/addon-info","version":"5.2.0-rc.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0-rc.11","@storybook/client-logger":"5.2.0-rc.11","@storybook/components":"5.2.0-rc.11","@storybook/theming":"5.2.0-rc.11","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"cd6ba7734fed91016edda07794d0feab5b9e62ec","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.2.0-rc.11","_nodeVersion":"8.16.1","_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","dist":{"integrity":"sha512-/EcNTT5ZO81EOBxnELuW7eEVExDSETUDh3/697F2f76v7IvAKm87mO5/2cxRnTD5DFba1qCrDD25DhXNpdLvQA==","shasum":"84ed4a4c43dcfe439bf2e958b4cab21495daccc0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0-rc.11.tgz","fileCount":90,"unpackedSize":854249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeAqQCRA9TVsSAnZWagAAUIMP+QBioc7LHOrSm4SzSLUQ\nPUCSGFkl3jb//2SpnfCnlimNudG4+VUdTFECwU+gfB9p5/CNiNSQ2SfBuiRl\ndxJcxkvvT2hnRywcb/sJ+z8OV1l6xqhFkiHKP0IvEEDvTremtHrC4mgqYlak\nZvYp+B9G9jWeyDGczeeKAQWfC86fmQj4VfwOq1h/OeiK9FFv0GPykFtfEST3\nJY3dnfXcvGpx7wgZoWjdw1SwwkvsPx/fBIIwNKU2k9n8zxMmKqMijFTRBP2C\njaDkYt/fmagHd0IA3LTFs3IPX5YQN+i50JrkyK4+3vC6k3yHKA6oMt6+p2Qa\nZnCcURLvsGZ2Aq2h05MSpnCqWDObzdbi68MO3TmgFcctUPwwYGs8PJlgdpCj\n27zdKbmKGoOXeDC93ZFU5t77K1ZMTW9g98NIpcRdTDR4HVuxcB3YlM3pAcYp\nj90tAEED09PeAKjTOPFZzDRPn/PxD7rAXFW2mml2u5KWKxyZEdLEAdRShdye\nThX5rI/NPzwwl27UmHyQEQx3acEA6YUapXAaCK7v8M59/5ROIzhhT/7yYPCL\n58Ei6M07KJuInf5YS+s0qMWo3g/NuaUfo+vOyNikrAqmFavTS/wSUsXQUsST\nByMSYP4fLAn24kAqJXg/hYzhRtKsEXWbKikPwn41msk4TTcYG159MhPpga9k\n+2yb\r\n=Qftt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz2OjP0vqRip6svFuRFbRMxK6hLA9njSoFM+j1Jjy5ywIgCkTMTW1ldqxU3UhAT2Vw16gx9DFdk4+kCvED3GkMP4I="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0-rc.11_1568148111485_0.5336805185896585"},"_hasShrinkwrap":false},"5.2.0":{"name":"@storybook/addon-info","version":"5.2.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.0","@storybook/client-logger":"5.2.0","@storybook/components":"5.2.0","@storybook/theming":"5.2.0","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0e780c17f0cfd4d4c5a266bbd52fc76eda8b22eb","_id":"@storybook/addon-info@5.2.0","_nodeVersion":"8.16.1","_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","dist":{"integrity":"sha512-JuBQKn8akSQrq25WR5YgXuSw3nsvInZRtpaHeChTfXrxaBYlpjB9prdhuoPiK830skaP9fJxGlZPDwYhu2rCAg==","shasum":"ca2c46c28a3f38bcd27a96d9cecdf1d1be72ca22","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.0.tgz","fileCount":90,"unpackedSize":854219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfGPECRA9TVsSAnZWagAAkDkQAJTOpq/jnZ/UBFOdQLTe\n8qAVonNBE4FszQbz3zBVLzrALbUT9p2kZYIkJzPr3Gy86/ap0b6sAT4OSpbn\nH6w8I0MyZHRYESDx12/Y6U4L1E3tUbnvBJk+qBc3OHN2YM/WQg5C6jmeOdvT\n+9T5dTk4nBCZ8NbAKgQX3Z4c5A3Jg0abDswMvh0z/PUQAvhPEE1CXi06kxKH\nHfBLrziPENcBOyprFsdW0oMrRm7yDDHItN8PK4iYjQfTajGLLqNn2kbGbHK2\nY8rjnBxMCAofpT4HBS3cHOCuPqG8zcN+O/GctS6P7cCOdyMUHyEOK2obbZLO\nac0T854tga/ss0FafCE+jBF1meR/1MrFW8VOrSDn3qDTm4uzOByyEaXU5lrU\n9gppJzJsZaLm2aJrNEDbZEpLxqflrpXbpFgmHYnHE9oZXM1g3ZN9qb8EkbS8\nfxTWu/dGybU8lqEFrq/fYa6TadRaNQlbX49XvMxQzsob6oQiRfJFTx3L5Hft\nGkmEuXI1Oi/6Si4s+5/jOspp9PiYx8vWMy5lrxWzs1VxrwlZ4gfFZsEX1/d6\nXNZ5MMSNjtt0FR+ihdmogCbMcbNJDdQ0AxqED85ShVossMtPbE2T5ES1eQnQ\nRgnUPlXgIQ8td8bvXrdSsTZ6ZQQLDRWF6gUZOn8F5KM9GxQOF3Ty+ycwnFW0\n9IWg\r\n=RUf3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICABih75Aj3JBjZETnrIKDVcNZBgkH36UwY/FvtCgLrUAiEAhlFub0OCIosKgCqJ+mr1qRbJ0lIh6Tti1AhUHlKIih0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.0_1568433091592_0.7105616410370632"},"_hasShrinkwrap":false},"5.3.0-alpha.0":{"name":"@storybook/addon-info","version":"5.3.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.0","@storybook/client-logger":"5.3.0-alpha.0","@storybook/components":"5.3.0-alpha.0","@storybook/theming":"5.3.0-alpha.0","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6becec4d78bdb3069ac167b19d01a81eb98f6164","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-J0J0E9AipDnKDoIPaVrHA/J1ZV2WCHVflqfTdmWBAjrJUJs7mAV3D5ZHd5521kHqgw49ceQ3P/+LOlshbRbwiw==","shasum":"499e04235c11c81e72a7b4f46592e7301a59bf09","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.0.tgz","fileCount":90,"unpackedSize":854259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgF3QCRA9TVsSAnZWagAAAyUP/irUaGDSzRjqrYcjifp5\n9c+avyCF9D9G9OIavV3MJGQF/eWMLxaNpu7umJXrXxCBhDb7i9n8gxNIoOHW\nz0adsPGi0f5zEAdKdA9pd/gjVaurXY79J7PKNwk47d90ZQZVykMfuArZAels\nyT/0tGAcmGWeG7l6KnfRJlN1RptQztcRk+VE4jn+gvPn3daHWrhf2M8zJOtn\nbI5SBqf4L+SS2zqUux5tuF74uMaMnvbClc6LkkPjL3gs4Nli4QJiSdu3UIfc\n9A7+55Lo2LCG5CiWK/7TWPyJERwFY/gk1Opw7DztIu323fmykhreiYMvEazE\n303A78S7Z6t/vwF18itsRrxG8t3PYRW/g6PsXDVkEM2ajHG/jVQfk7LdakD7\nkThD1gKmPIYjv/1k8X1Wg9TOqtrSDI6XkbWRPanDW8an40bMqSg8jB6FNq28\nzRB8HW7ymsMqut2MctWwx84WVyt3/Q4eZXlVOrNH7Z2MYOqHcRnpI1qLcYxM\nCD54iNMRBhLrYv5S3y8f0uwnvMXaqIjgICl/yFFqpcZyIW/u/ZSo9KJh9Dn8\nT2Ttbnp4I574FIr6lQsV7+b2X7n+MOCWTuhAS1MxWSaVQ2hiRoN7U9N2DIY9\nFIRudvI2RwllYBPTTvZsaC1K2K1yXbHjdjiWajAzTtSLEv5q7arf0mp9HD5u\nwkgF\r\n=Pc2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDr3tzEcv/MZYfNtxWfoockKgJmEsRkw2hU7cWYMw8cCAiB7le+I9Q/ND+iAlu1XZjuqvGLfQDYg+Te5PtPL4H46GA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.0_1568693711935_0.4095336368142932"},"_hasShrinkwrap":false},"5.2.1":{"name":"@storybook/addon-info","version":"5.2.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.1","@storybook/client-logger":"5.2.1","@storybook/components":"5.2.1","@storybook/theming":"5.2.1","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5497d2ea8d47c4573d245126e6f3f45bc176c12d","_id":"@storybook/addon-info@5.2.1","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-/BLUXZT5UCayKaeglRZvkMiRzDrypUoWvDzYFDSBgYXfa9b2LJFYVEcwc6cC8Xtl5F225qXBPNnSNRnz7hDAeg==","shasum":"d3534ae6cb6ef2d0036522d5eb01aedf68751d40","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.1.tgz","fileCount":90,"unpackedSize":854219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgQm4CRA9TVsSAnZWagAA6vIP+we0nj8PBi+xMlMA1R4A\nYBIMxy1EAdbCzdWvJXUmN+AE1f31JPd1q64mbc1fxdbLj2nDfG/YFXAHFAGF\nrCw+7fZt2jUqZefi6tJGb4xRvuDAsvNQQr6U7piW1PzKJTdf9fSm6rzKol+S\nrNk2RGZLdgqJoPJB2nppgK9xfisl9+EfieGloxkaNByizyXmLK3gO+g1iTRX\nTLd/Q32QLpZWhpllB84ZqGyw5fjuahy8/qZk+3f6O9XnguqF0sgGG1IklrTQ\ntELe+XwqHY4NH5jVivpGijgzJQMEZr2Se1Zo4RKpBcbi6chdpW5/tmk0r0FA\nfbAIHaM8pu1uPJoct87Ub82aKW+RJqqGahUTP2CkxIDuVDml3txWqFwZuE0j\n0dgNLU5mPRqCQuKwv8OgDHzo1VyBF1wYMiWTElOmgTL7Jpbt1yUvN1Y/mGcK\nefOFIHdbfvIAeGYQ+dAkW3HvNgiUo/swmM1LBW6D98/JmWk51XqcrY1THM93\n1LoVhAtoj03kSPuERgUq2sVptzDHowVUjXQ92HTmOjCKKUHUTpKpKCNCuZnt\nSB0rucpZUgal+0U3AMtSg7QAe7DGPAD/2OXv8EpFEzoGPjZl/+nzAESnC21H\nnCpjV2tB0o42/7pHWQn3USffdW/aS48ZL1ZVEAAXnEopnvSsJnjHmDtCn5jx\noWBh\r\n=9eLs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEh7JykE6EJ67cxVuc3rxlH6GYtUtIM9SbOMQ0sQ0aDvAiBEXhhkhC9fA9pwFho2Gz2ZpI4Uj0A97zK+Vh7Fy3YbiQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.1_1568737720227_0.6691862768735675"},"_hasShrinkwrap":false},"5.3.0-alpha.1":{"name":"@storybook/addon-info","version":"5.3.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.1","@storybook/client-logger":"5.3.0-alpha.1","@storybook/components":"5.3.0-alpha.1","@storybook/theming":"5.3.0-alpha.1","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"13995be1573d43b98432b8f2a7f1c288dc574005","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.1","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-NeLblpdCci7npPKRu94N6QcCdcvFzMkfev10OI51Xl9hR2atRAYElRWLhLg4NBHakkprDNth8/loPN7NHstDCA==","shasum":"6742c73c9899495e09d5850ebba8c1741283796c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.1.tgz","fileCount":38,"unpackedSize":268415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiZO5CRA9TVsSAnZWagAAfzgP/3xasmkyWF1AairtdFZ/\n8YVzIFqwPI6/5CVmr4IJwC+Hs3W1J1WckifkReXX2lhkWRY83jCE6p4oTnpd\n8ArCcAuDdNC9o9DtE8yyi1b5areufB7RIMMKygW858uuyqztLjN5vb8l48b1\ninPGENn/OCIy2zu/m4b2Tz7ULOzkQ8xxZpgr8R0k/GEH6Qob9s1x2jiD1IGC\n/JiNYuQV17iAsADISQy5lv08UMHASoInlc2OxDCZL2WpY1hJRiYgHY99/DvM\nNZTvvqEsK/1/ppSf2Z0MZaQzFY3QQzqYlW4gSbeDT9wcvSqCCKbtvt/UEJnj\nL8mT5p2Z/QW3J7+o4BWpLfkcJJqR3EQPdSatYdGWixQ1S9EOT2DiHPqBHKLC\nCMsnF8r+D+aDGJWFpZvBpTzABZL6rJ3ElwMcHbXyccG/6X1BRTdi47P7XbXE\nRDAd3JOQ0NaNdQMVgh3tKQ+8+xma9FnfrJ5n/Hv0oK7lObNwK3nIgmWobQct\ngfhbWiwEPP65r2OQi9wn4vOORbnX3jIfjfnss6qqRdgw22irXIhaD1E5W0Rs\nKiOx3D9wW2UtHfEeaBWXpfu1d1SorRO3ZfQGPm8/T6VXmkziGvyrPE2PfSjR\n4p/EYtTY2ZVke8pe8fT4xiwrWYvACQtyLoFhu7P5bg9GTGE2w4rL+4SnHAvW\nHkis\r\n=/A2G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC33Z1UfYpnopGslM6KqVOguyzw6kz4Z502CLPN8yu0RgIgYy1Qov462WZygV+p9XTNrQ8HknDFRd5yHnql8IB4YXo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.1_1569297337154_0.6521494660446692"},"_hasShrinkwrap":false},"5.3.0-alpha.2":{"name":"@storybook/addon-info","version":"5.3.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.2","@storybook/client-logger":"5.3.0-alpha.2","@storybook/components":"5.3.0-alpha.2","@storybook/theming":"5.3.0-alpha.2","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7b2a715e40e972b08705079106a097245b549043","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.2","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-Ukd1bYSqMmP+UyJbjNWiZwoPYkKbjZuCxkYu9wP0lUrBNFREOwAHmvhm84DFktNhye6C0vblPEvh6rXclQ3nmQ==","shasum":"981faea3ad3929833b38199c130f478fd7d04cef","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.2.tgz","fileCount":38,"unpackedSize":268415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdih32CRA9TVsSAnZWagAAWLQP/R23bMCLqnfW4yei0uYv\n2xH20kv4qwK1Q+39DzRidF/jd4XnL/Pkmx5kTwltWDcCGoFqkDSn2OQYYjyx\nejLCqv1skakUE6iBpBg0G5CJHPQrkZatwjUj02sRf/2SU5rdz4AFnmb3K5Rs\n2HAIO2FkcuoELxvH3GQNnzUru4UoxKzViALSUoh+dWiLiX2zpP5/pX9vqtd3\nOJFJ5XaZ+nR4R3gXsfyk8Kr8K/tFbdY3Ceh9EjCnTY1AdOzv5XvDuaFn/KT9\nK3g3WMKOHHeVnqy55ac7WNz2koxtHJ632vOdjUUwVpR3Um5np2AofYSzNpYj\nTVrLV4qgjCwm8jlPurgad82biQmmIG4b7oAwh4gdH6e9BkN5iEoo5IPM+xfW\nGT1d+KNByu2FyzyJEBrrU0sfRkClUBpuTt0YQmFxaQpy9Jt70pL7kuNw75Eq\nm1x/VTNbu9NX/bb+6HQHF5napD2zXsNwVPMGIPLFyXmuBbT34iMFwnIGJNXp\nGzME1I1vXp8KS7zTA/XUd+tCeZo1IKP5bH9QV851bC4acKFrFPcsWxqFajRk\nW5QbVikCrI1/b5x9e6LT0WG8vGESU0nfuhJAwg7dJ9N1WNBl++fmPwb+y9st\nsDt4rYufmSVtZ27fMy5Y9jT4DaAYtfPuwPGSsk+uYDbIHWtcuY1zyMMYFnQX\nVnzR\r\n=4pS9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwHykkeWQsm8MZN1s0yuuJjZSXs4KwO+D7rleionWS8AiEA2leBgRhm1VR2mOYAYx6yjy2AX6KclvEFX3dwwhmKDkU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.2_1569332726098_0.5815412466330638"},"_hasShrinkwrap":false},"5.3.0-alpha.3":{"name":"@storybook/addon-info","version":"5.3.0-alpha.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.3","@storybook/client-logger":"5.3.0-alpha.3","@storybook/components":"5.3.0-alpha.3","@storybook/theming":"5.3.0-alpha.3","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4f48bbbd543ea2d14f8c17cdfd38f1e27e019251","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.3","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.16.4/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-PN6dVU6HjZbY2T+H+K35h3n15WHo3C2/H/fTuX3XpYwHzV0cg22gcgiPA8rYF5N2XTT539SVh1Me+Y1f9EleQA==","shasum":"2ff66d2f6db859670c4d610b37d35af997a3b5e5","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.3.tgz","fileCount":38,"unpackedSize":269501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi7QgCRA9TVsSAnZWagAAaygP/2PAtFcC0QKk5B/sR/+I\nJHl42rg5IYdkyFnWh2J3cX54hysOXnMZHSPtR6vnStZRnskZzCZCZHfoGiZ4\nEq3P6DfOJbfTRn9oAUK1qBLkqhMQadm3Q7pWGlIiEFrE3BXTWxSDKr7LJDNF\nO0WuX1iXqCxEgUq5yOozeY16Ptj4IhwLwf/R7N9F9z0Rlg/S6FGeFmbtQOMU\nrbP9rsZ6zfPIr7CVVbKNLxqJmxvUqZN4bXNdiv2aGKyT0ub1oMJIMUnxtHWT\nh6Mr9LNGo3ZkK/dfEnvGVQQEvQbyrbAZT4SDKEF0UsryvhOS+fAl4cRt1LPR\nuwg8Kj5mV5jYQFK21zUARb+R0oswAkzh8M9OFv/Q07FqSPqtVpyodJ5yOW/3\nYQ78NQIc1V3BRSH7b18t3xqs+3bGlwYnLvSDiPkDwRQgUxXSTcJoHed0KfSb\noLZ+Xgni2P9xF5hgLe8Q1hg5kBfqEzmnXvdiq0ntTcfg3LmP8rx236PrJPbd\nwd8QOOlnxmswSZYZQt/HlgMOr5f8Q3nNQdvtrXLcDNN3w3NwjBx0d5DL75Jp\nJd1dT4KWt3Is3egt4KJZnltDc9FlkjGvvKMYMcu7tGBsqpX/pMYEW6kKDtWi\nayRirzjme62uwqFKi0e9/ataScnKwfVH6QQ9fXCJp8J3lsRgbscq3XTifllH\nCgE/\r\n=POxT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNdkzxCHf3sH28C2eEA51Pyb/PTuydHbx3zIcvoqgOtAIgVR1Esq8L7RQErM70GpAjxbjzkE0lANn28yXjO7nO0X8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.3_1569436702918_0.604535597518377"},"_hasShrinkwrap":false},"5.3.0-alpha.4":{"name":"@storybook/addon-info","version":"5.3.0-alpha.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.4","@storybook/client-logger":"5.3.0-alpha.4","@storybook/components":"5.3.0-alpha.4","@storybook/theming":"5.3.0-alpha.4","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"af65bbe2249174a64a43952cf0104b7f9feea18e","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.4","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.16.4/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-5r5dG/oFxBHK5Jmgc2nTWeaDsKw8Fh6/yB7lJN6jYZtA+PuM3ehZ590re2rjlq1lpJNX93kUJDD5LrUqxAtgag==","shasum":"e3bffc2e1cae986a069171101eef69ebc26d85d9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.4.tgz","fileCount":38,"unpackedSize":269501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjahNCRA9TVsSAnZWagAAXZoQAIzP0ym2ZjKD/BGq5mDW\n4yKRPpsXdbO7gT4mBIozO3vVKU9N3ISyK1M/tsnZgSk6JvBRC/VwE0uS4cYo\nKjXrBMe7Ip+OzyfgaevFD7JsnpwWbwZPxgE0cLZfDjKKj2H3VST6Dml/La1e\nGl1qHNftCIJjuODx6oIV/rgteas/ZAcDCFRpRiRFpCClKMhv8I8t6k/8i0Uu\nEVfwrhsQlx7wWD9HYkpjHHLVuI4B9AcVQnAapCn6Qy5t7Q6Ip3NUf1zlDEbI\nFcJ7E0iy+TJpy35enu210XTphOWcZ2DjNNprwwZhqIl8JITfaZV77ZRZA5fz\nERHf1ZhZfM36UNOIXpSBdK5wvWJjRUnZvkqZ4AQf+ES8MH0ERzHSE5vRdeKm\nd0s49qScvbYQb9v4+BjYfJe2kdGLW5b1Foxx0PirOhmemHE8VBZ+2wOc6xM7\nMttzChjk19oLAYd5zorngUgG8oRolKeFtv1FcPcao8YSbi74dloaC6wYVDIr\nEnZYH54O8amqVseszObB3NDXtMf5enK582o2ddVYQpLCVyhIRQdwrYjrL/vm\nW9WiZkbQ3IxKElc8VH76x+jh8fBtLmTMtR4g3DWdngYHk7RgI+QeE9wacN7G\nQVxJxFaRir3ZUYhukt03mFSCHEhpBGft2hsFV9/JdCO/RwaZmFwxpUTg0JaK\nYQCG\r\n=VKhX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaULd44t6q3pXk/XMPz48Qbpp2VTvmDUKOuv4w0BKPOAiEAm2jPytdeyK/fTJuWFLjsVAgYd4pHof4m9EA1CBwbOM8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.4_1569564749199_0.2917955035212729"},"_hasShrinkwrap":false},"5.3.0-alpha.5":{"name":"@storybook/addon-info","version":"5.3.0-alpha.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.5","@storybook/client-logger":"5.3.0-alpha.5","@storybook/components":"5.3.0-alpha.5","@storybook/theming":"5.3.0-alpha.5","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"714f930342cb47a5449f0f6fa41af7c193c5739c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.5","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.16.4/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-huN9edKzbykSngY0GoJEdu1UgtsJUFTq+THS1pzN5iaiR0SO0/iuV5f00QtOxj3YeVcxjMa8SstNifkpyM2mxA==","shasum":"18d5eaae7f41187dce6b0fb3be8491210858a57c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.5.tgz","fileCount":38,"unpackedSize":269501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjwNJCRA9TVsSAnZWagAA1vUP+QHKtzbhL28OuOHywgzE\n+3/6XGE0kOO+zfmk1QZGOULHQeXpI5lo6hpcxUaKKaF/mPyygdliyh0g8agL\n9wHQ9qtpmRDi+p0CtlRJTb69SNCHJ640zNJcO/0CnUBj2Mqr8A4VckUbMkhB\nmHHFN6YhWtIduGOMMX9ulhhGf0T9kK4G9/qvd6CuDuP/lDWheRtVlBFRJ64F\n4KpTA9bJl6qUjdV5yTLvf+oOcwIyTrBuPnc3THhjIpkoREfAS2N31vu8NL3a\n2bkgGiiKKwzUCa6/H5KhUvMxDWSlc+BvaCGiYcURZfMYeOcwOgFlBLuB7t+Y\nop44ROCAMwzG04dRaA5IfcQ+WhRd5QXR6dqREd4GVb2jHe/dZs/zoklGiNhB\nqi1d3LX7ETV1m3S1PjLQL6HbqHXjjCicnLLe2yHapNpMpRvCGaN6SOYbNgAp\nH653Mj4HiAJw04EJxjtK5kcCjBK098wgIf22+23Vx/GwmIki4Qyu1miXvajo\n05bFipVNFpGaJImEdjRNRDKEF/dLj277p05j2g/jQvN3TVtAYLgc5kg1KdoJ\nGAisQ1SSJj9RChlB9AT4iosNwHd4DialgKHhkpVj4YhikB8r9vv3HOgnx4jh\nhUlECdCXb9fx1PhWJmgoEhdCgqP+tVVOOqA4OtWxvSCOrXp9epI7FxkmBi86\nuV/9\r\n=n524\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlPVwI8aioM7wTwBe32Pe0LQWsgVRKdcOHo0D0D77KGAIgQ7Cw83kJyVy4nWEVliq04Ujd7tXCT4F9PkbJyplnw54="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.5_1569653576881_0.7844927603508238"},"_hasShrinkwrap":false},"5.3.0-alpha.6":{"name":"@storybook/addon-info","version":"5.3.0-alpha.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.6","@storybook/client-logger":"5.3.0-alpha.6","@storybook/components":"5.3.0-alpha.6","@storybook/theming":"5.3.0-alpha.6","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ae53acf25e494f465611684e1ab07ef0f7a664fa","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.6","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-Xqa4EzE2UL2JVYw1/EYPr1uQhsPc66H35bIPjNSm3iHnyfMGvllKscDIPX1v/gMp1X6cGCnIDOgFpkID2ftU9g==","shasum":"4829918ac4b64d80160a1298f9150bdd1e097509","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.6.tgz","fileCount":38,"unpackedSize":269501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk88/CRA9TVsSAnZWagAAJAUP/ROjPidzF/cc3yelQk1f\nv4n4wVUCcWXld5sH3D57Iq02y4qqBzseEjQFsnDknvz12nGRQZU23Rpj+JbQ\ntMGnwnO+aV/Q5g2XjVJPnIm3qs4SjjFMDZw+iUiRjrkiojDywCwbXkhLw/ts\ng5IJ1Bh7SuURjl/D1nFx1ESc0qJi9VlH0N96W7pQ+Z1UFZ+3mQLrESqBDb+6\nP8f/CYaBw54WYuOAh5KvQKRNtg/O14XJFTE7KP8TwwgJB1NFjUCISq7UEr2R\nck7SEihqMhhetIJ3I4N02zt0mtwhtvPKsIUHP0tiQhrFMx/5YCsz6WA6EgPQ\n4dZt2YmXyRyvptLs2wYtcyKvvKlaTqsiLbVCZ1wvqXY46RP5GvPv5NlU2tzU\n0hKi7etc/p0JxP14eGu3MkMxl80AN+gWYHi1hPuE430TaLThkZHuS+Iw7BiO\nry8rKfJ9XBdy/JMnwJM6qMl8UP8qnIuNSh0rvevC37tTh9cGoQ3stdY8DuGG\n7QyQBuXGqvI0e6FJtJawAP518xDjXOJZEyhTzms+a4bUpoP8QW/SHPEujm9P\nT0KFVe/xlZ6yhQjXRSxWDcqIO7Q0fIO49nGVXHPxHqnhCENNyDuJ3du0/EpX\n1ZZbHSfs6ElmOG069RmE7YtrUdpb4vXs8uzy2MtDomaC/0FvzPuHjLnMI1tG\nr2RT\r\n=utu+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcofuE5OJqchwUNmMDnkn8htFvj6niikakDcVxmz134AiBCIz91DYfxpF0kLaNUoZjufa+HSrHwRJf4NCZn61TfYQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.6_1569967934889_0.051878663139883985"},"_hasShrinkwrap":false},"5.3.0-alpha.7":{"name":"@storybook/addon-info","version":"5.3.0-alpha.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.7","@storybook/client-logger":"5.3.0-alpha.7","@storybook/components":"5.3.0-alpha.7","@storybook/theming":"5.3.0-alpha.7","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"43afd675b41b6541f6f780bd5eb19606f192be87","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.7","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-cd2JSt9Q6+C+t+SggLLkj84tNviZJeXHg3xRkg7RD2fgw4ChP6e47gOFe5EsXSO0yyig4WTU/da6VAObQwXtNw==","shasum":"d7e4a712975788e4b6652bacca31a2f6c76dc18f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.7.tgz","fileCount":38,"unpackedSize":269501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlZ2dCRA9TVsSAnZWagAAfK4P/3yRpS8f+KEERI9i2xLc\nmc+aDf/AzXGi6FWYP1cYYo42B/5GbfZEArCbdZDbO9PQjfzWjEuX5jf3JcZj\n69KonUXdJXnsjFjtCCfCNHXG88o0WyZpcxnDvyEB2PUvUN5Bh1K40LSq96h1\nJGeYfyrc3ZPNwiOoJ2VERM5CL6cmv9Vw38gCkhcx2toEE2jr8CiF9d8pngwX\nl1ebr6wjKxnaHxMcKiSb78bYRaSdwwCE2bCcU8leCErHO0/PXJsjBWr8pWyk\nyIxDWKtCmoHXZyl8SkOupCOEdguHVhAIaUlPKLV2NrY0bYLqQecm98eCPRtq\nWSm5w8xPVAydULbRS2AOZ7VjUOwdkKRAzlsQN0Q/yrY9bmR3TsYsJa9ahsN7\ntKvMAW/uNnlWslVpZK67xELdhQzVs1+KVgmRYrnBjI6EA2Zf96WtI+nhAQUD\nXrnXdHV38CaMReISMlOH5mpQhjxKvHDBD4N/8qMKtYXuClQ+TuTZ7CtY/zE8\nTI7fegoT8Yfjmctj0aTamKdtFfE9Me1mBwL8X1RTCmRCFONyhZrJzHCmMDfE\n6fhJzpAYVtt8WtCuwuyYKYnlXAW0+HctC/uadyalkWxHRB6AkJRBzBwCaYOY\nQxGBo0xq5408ZeF6yQ3YcG3TuAnL8CzdEvwSUre02yYzqXfRZwVBo1MfpL/a\nAuOm\r\n=S/WQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/U1rPqTP2RULJt69BvDZUYDFHF1G/3saJWsgvQfovxAIgKXD9/K/7+npa5uB5UJZtEZmo3pBh2+lEzIZf04qnJ+k="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.7_1570086300474_0.876341556133249"},"_hasShrinkwrap":false},"5.3.0-alpha.8":{"name":"@storybook/addon-info","version":"5.3.0-alpha.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.8","@storybook/client-logger":"5.3.0-alpha.8","@storybook/components":"5.3.0-alpha.8","@storybook/theming":"5.3.0-alpha.8","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"dc321d395df4c142683b9bf76ba2f848406806b6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.8","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-6OkqUozdlUCs8GqcASjM6uEdFrIXmUWQmDqDxmqIOMQG1C3yhHZmQdLbgAuZOjgFeqBZ5/Om0VP3JvHTKTI0Ww==","shasum":"17b6c8dfa16ed6fdc905ce43595d04423500166a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.8.tgz","fileCount":38,"unpackedSize":269506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlvMcCRA9TVsSAnZWagAA6vkP/2dFz9p///JrfwF1/K/Y\n+7DdS/hrocsy7B+VbvQK+nfm+8voddTS4h6TuTJ77Ic9CO4LD0ZvsZ60esc0\nFzyGcrgj4IYU5b+pwNNtqFOmcDNbkg/95Fz3BSkKYlaCy1W5QIaRyvnrArfg\nLCloGwSGAWSwc+Tgt21o9k93x+KqvgfAvfgL7G0qzvbKkPmRwJGSFZxRl2YV\nqmgTGbi2iWIn1D5FkCvZDSjnSoG984gySQm4NTnCn7qT/RBQfGQAaVBw0lyB\nLaEzra41BY+6Xsw0Y14lTskTd3y1mcS2+aCgZL2RQSoTeEsYYl+tK0Z6GY1p\nbqMo9/LJOEof76k19W7hsLjtU+I6XmugWI/4djSHr2Zxtt0BUgqx46AxNn6Z\novm01us+obdddRe2AyFfQm1hwxewVPRX1tC63n2VKQNRvobXWbJ9XMM5ZRve\neFgp9r0eb79ryhN9x5KPZ16aEBo84uEJsppk7pmySnME4ilRIykVIfbaEBEu\nFCf2upLdDBtdYe/JFzatPiqVYxxLRyLv3PQWhXO/zwJX6JFzWDGVLPf1O/T5\nvfG/Ms0pk7dJpHbwlHoNqhSDb05KPoihMlvZ6lUIOJh0gIGFVL+iqcPlBTfI\npLGUaRPumroYarG1wkqYrPhsW+0iSc1o+y5Y5wawDAokrEG+eo4Zyp2va33d\nG+Ca\r\n=PaT9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaPXnhFp79dOyKM4PXQKRkLTVjtpCbxj5e8niZ3K09TAiA05JwMS1EsMhD5hwb5B/HzhomuclWQwZq0W73KPHjeow=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.8_1570173724010_0.14707992698492633"},"_hasShrinkwrap":false},"5.3.0-alpha.9":{"name":"@storybook/addon-info","version":"5.3.0-alpha.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.9","@storybook/client-logger":"5.3.0-alpha.9","@storybook/components":"5.3.0-alpha.9","@storybook/theming":"5.3.0-alpha.9","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fa363149e3d4e6abfa757cfad03f8fe0d408c4b7","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.9","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-oobEMuga1NFyFggwa9zqcR7HeYl7rrJ9lXW5h/2aj+u9WfESMHj+qETFAucXAEfOKqZDESVqeB63O1WECOHNgg==","shasum":"e3a398a978ba653e96280cd3ea881035aec61d34","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.9.tgz","fileCount":38,"unpackedSize":269506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlvf6CRA9TVsSAnZWagAAwMcP/0WkqL5VXXCsHyf7My3r\n2sZ0jNIhSLVk8o3Ml6cFVNhN7cVkcTBvXUGnrQ0XF+EuiKanZrY1jsht1MPU\n7fDs63/gYOtQ+fDx3hhT/j9OK1xgp2vhw91Xpd9VgQVAf7OiPDG/0FDHyuQf\nUe/LxbGdw+f4f5B1GPg5iqC7T10Kv3rRpXoyRSiDmYRq52Jjio4C5LlMhLau\nNT/G85QX21DJM8ZZ49mFEUJrtTPigCol3y36x0q/l6FTcZv2R323ft2Or7Gp\nEJL34OIshPV12kcMmFwwv14rZ9+S78OzOobPBccF5lOkGc+8d38AAcCLEb9H\nJYlOvarTc/Er/865O+kQvX5KXYT3ZbbEmvQsBCKmZ7dIE1Q0YKNF+5KiiyXO\nuzmE8fzLLZU+NFs8KMXHH2BH9x5j1PWWe98NCXiYEjRVLf7hwhP/lcDHuRoR\n9os4vLqA8ka91WlXTfAhPC7vTwLjVlfKsNparqgbxgceHoIlsPhuNNSCt+Zh\npvyO5/8hztDauYejEMVgdSCfk3Vja+kV3myWowzuKHF088NXE0sWm3kysnQP\nYZOFfnEOtD7eH06wLrAYohAFj/cLeKU6JMw9m3eFf6X5kjdhu+uYIJ5y0lWN\nLZ8cxuauNu4ov5GLIFG+Wk5aISYkFKFykrYdU+e7ANWsn0k+bVqTVC58IIoM\n80FA\r\n=6y91\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/6mIVpYwW5GMmDgl1xrSwy1VZQAHlMi4oNRQEVFBITwIge7ZA+LJ9Ty042allmvPNsEzRPUy54XoD7mrv/IWLBrE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.9_1570174969645_0.3081117684660468"},"_hasShrinkwrap":false},"5.3.0-alpha.10":{"name":"@storybook/addon-info","version":"5.3.0-alpha.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.10","@storybook/client-logger":"5.3.0-alpha.10","@storybook/components":"5.3.0-alpha.10","@storybook/theming":"5.3.0-alpha.10","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e478ebebfe2db30ed4014c91141cd43e405596c6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.10","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-dVvcaO1gPYYTPY1Q1b6bNoVpQZS47hinEf/rTH2vSNTEAFKOJco3LQlsMSoQnQlOafLqo65ebePXI1cMhviQSw==","shasum":"e35eb358dcf34e54e3b687f6f6b6e770ffed2e6c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.10.tgz","fileCount":38,"unpackedSize":269511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl8igCRA9TVsSAnZWagAAGgoP/iyAjIMKGJZEFrnwFCyG\nB8jO50y6eHOfyV0+ONKrOlHqfsvWRqhN3jbtjfrF/kuDDvUcsUJqkp4tqMdS\n4JkoWcNvsbwSTAjdwrKYEo5QykINr6Vlqg77SmDIWDwR2Ri4xNN35YC2611B\nfzfzLZ0ao82c91BoTxmliH1JwftuUhbnyriDdPMC893LCuF/vo9mp0UzzwaC\nNDtwRxDS1iEk5JxSv8zg+2zw20YSYbPn1gJ2NAaGLbYl1hE8N8I0w7GAiV8j\nB0D0RboeepvvgBn2BeRvBiVCdDal/OgCgn9TRj/XVjrmjuNkPfW1wQKQ9eVf\nAvY9n93Hvt5ze/rQFws41fv5PjahgjFZGBzCgXE50bJj89CDmtgfkmFPKBf9\nQ/G2DV0BMGFbDjnGDDqcCawaKkUSpn6kAjomDp02/MeLh4Mer1hWpXXc47Yj\n46gXS4vn9d95BCaPTsLCWQ0Jv+1WJa+xMNm/9sgDV3NL+F3zQLrEdX5Dt1h7\n2YjQqSPtQhL5lsPThWw7ZqDiRZP6HY1ueEP9VX6HjwOqupoPqDFiaEghXZyH\nP16DT1nNoI6JaVKFC64lP3joGd+6WXAspegwoWmvi+wjr05EO4fBXQJnTIx/\nSqbBS8lTgzLY9vWJkCH6TcMbOgYj9y2wP6HntQgDC3CHC65Wcslj7qlkwCKO\n6Bee\r\n=4oPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASv53psXzHznRqcJ4fJLiZL8dN9lzadoWUYZRGImH4MAiBMGqhU2t17kNfSJqeofooNwyfCYyINbKEY28irC3/zTA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.10_1570228384232_0.30643803253124857"},"_hasShrinkwrap":false},"5.3.0-alpha.11":{"name":"@storybook/addon-info","version":"5.3.0-alpha.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.11","@storybook/client-logger":"5.3.0-alpha.11","@storybook/components":"5.3.0-alpha.11","@storybook/theming":"5.3.0-alpha.11","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"10d80f4c1f0ccd9486fd1daeaf8e365cb81fc919","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.11","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-95SOZIyU+wBuj6hqrDH7z007l6EefBMsp0pS0pEIKvaCKnv/aap6l1+qDy7vSYURQhBE8gjuVh6xCzkbUV+pBw==","shasum":"defa5c533ecac5e386c32edfcbd7773615491b01","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.11.tgz","fileCount":38,"unpackedSize":269511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmUWCCRA9TVsSAnZWagAApYQP/0cjIoJhRsCXj61vAPBG\nX+Gsk3W9ta86lw+5YLiLyYmBF7/5CGJ6VsnrIKGkEUXaMURTIR8QraTDvBEr\nmtkyTu+HTCBtauPa9qNHsFhOATolMNqwwZuU6EwvOa/ZMTaBb4i/ZvvCG9Et\n5U8O5EGf4nTTe0DZWaWfMDVOKPKCvjfVp20QC3PyGS9IErY7+QV3IPJfBEGY\nGePFMmdy/WIvyhTVtTP1LmlA+V8lg8Ur6cUOx83FwTjiFuV1gWD8QDS7bAu+\nHUsfwrk492lwzWGUKS8al2bLM5oDe4yybnJx7CcdE/JOa4Gi2eiCTVnGAxfc\nC/kWMduq2WX6cianelojv7tEfISb2ng0GUCZ9CJ47HSIEKkxZuDB2OemGIzf\n+QP3/yf736p1DT0RJRoTlBG23UB+h3swfmDUXyMflif1oKOfgUde7QAH7oYz\nL7lWFzMcvHnL6EwtAWK4QwbQe0sjWGuyjst6CZc783KyZP/hGyodS2bUdivw\nSx95W1Go2DDoOOCsNYw/q7daiR/aMGoVeLqvBs+wxkcF0ieuHKJJtHfPcfE0\n18mLbcFHmVdOwaHHqr7X+g+jpizVVgIb5YCed0w6e/KAF/ugp45m87zVS3+D\n0tTuDStGMGaVv3Lo5JxeAv4schuRc0QhCO5cKDe72cvTI6jzhSnmqZWeU51o\nnHQq\r\n=0LHW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6gthmR4ieKDMyNKrfMSHgH6uchZwiN/TMsCWJY82ZbAiEA1x0hzdNdWs4t4rklY56AcM2XmiWh8kKM9vDeoDSGQUA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.11_1570325889687_0.23425133049508284"},"_hasShrinkwrap":false},"5.2.2":{"name":"@storybook/addon-info","version":"5.2.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.2","@storybook/client-logger":"5.2.2","@storybook/components":"5.2.2","@storybook/theming":"5.2.2","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fc0e18c5bddc69493f9a912e46d5558d4bc215e9","_id":"@storybook/addon-info@5.2.2","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-8Q20DBzSEh0yKtLU6KJ5JZJwohpQcT80lH2pVK346KO4Av6s2fdb9Q6dupDTbZgZ/UlMBuwJR2yV+DO6IMWwsw==","shasum":"3d8fc9b77f0301d04839aad4396a07d6c73809c6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.2.tgz","fileCount":38,"unpackedSize":268375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmw5VCRA9TVsSAnZWagAAbTQP/jZm+9Lr73gH9vQUROTz\nELoZHaP1P2y3kOvfm0SLhGFuLTHlzrTfItK9ZGyyrhUHBstyXdyzWE1KIQ3h\n49ydUnRgK8GNcVaJd965GMl9ARpbfEWAZbL0u4sS8xx4CGvtNuwsPxcD/Jt3\nrGOhs7SlBd3rJhdHS4LAeobpKLtlhdn51QqjQkuzremMqlntVH1bRPEUfzBe\nbet/ml8bou6O7j8YsQYT0+75lbl1dMxgMGIHKDSptcjqT4dtas9kQYbmn6V4\nJexAI+vBZ6dN/fAPD7EZOcFkDshXmGFG28isyR1YLoy1pb72aoFMsHM8hNt4\n4q5baas09az4wtrBuZ9JwFRVLRoQRG8vLS9wbKZaDm9MvMGGP5YkX3BGEfck\ns7p0T9aSR4aUzzGyCfSKmrjbsRFYoH9+DnlbLNrQMZ2C88dUxDRs11oJ1e/r\nP2EZClggGwqf4faFxh0jb7utDI8YXOYV3o6wDjASd5G/QF9W2+HxgF8ScJMN\nR4u/NeMqnc1+iSOhVmcE8thJryCBBBQJxtI+wPxUV//x3yF4uz7FJxKsSkRu\nGWQcRD1LzNw+0CwCD4VJux5SINWrbOHLSQE/Bfs6E0tW+XdacYV5lH9NqJcU\niStR7/72oc6iFwxno8m5Ap6SAd52S0J9h1MgjUVYe9k0i9AzraztIbYRx4H1\nqzIL\r\n=UaTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/kcb/1gxry/camaf/FZ8BoaNxuBmDXDUOdElj1Y3bZgIhAJSqT96AkEDEmsVFKDkWvoubLt+xAbrc/Evi4WMPwq8N"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.2_1570442836810_0.45242189143450084"},"_hasShrinkwrap":false},"5.2.3":{"name":"@storybook/addon-info","version":"5.2.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.3","@storybook/client-logger":"5.2.3","@storybook/components":"5.2.3","@storybook/theming":"5.2.3","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"836003649c127a04abe4e0227e774371dc5f87df","_id":"@storybook/addon-info@5.2.3","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-vOyf04fi1MAcESpFxkqLNy95x9CC88TAtVZIQWTNQpGSwTF+ApV0HXvm4gVodMZEyr9SEupOK3MbQsKpWFS2eA==","shasum":"df792892a124b0f8dae2895b6f070cdf8bfafe4b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.3.tgz","fileCount":38,"unpackedSize":268375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmxy/CRA9TVsSAnZWagAAHjcP/RcehGWtjboNdAkhQxpN\nwW2ExuDofRJRvQa/0iaxubCOM9R4HMghq//HVqHTb5pRlWlYpaRGCLguKkd+\ndk08Ga6vLjq7iY97dFYu9MyllZsFvh6qKcM2bB9QmzD4gnoLfOJrHOZTuP1P\nO9q8J/5DKRXnemQ3qsSd7j/RAxYP6XZMU22sMOO2MHToLg3KkPTtW1wjT6zG\nV1Zdo4WBq1eeUxMhcQNexCmBbbweOB6lpp1Qz2wG1b6k0Z1y/x3lVDy2xz7+\nOhVRf51QWlrtvxs9uX7uN/eysxrXWOC5Jvc+Qkay8SS45bHX28cNSulWQveO\nFf3DbSl/OsK/rkoAQrCs644JyAgSEMySaCSTX8NRBOgcRyDEGJ4MW+wYgWBH\n/mykjj7kGShaLh9DNs5y48Ca2XLhBNhZJvuxy+JFKuv9+dYOeKwg/3YTbo89\nfHHJmfur+jH57j/tRJ+qcnXPeGdeVW6AgA8ABZjolssHb4fWPCPu7Fd5Hvzg\nmNeG5P5rJ+y4Uf8KvPdi50brSF1nwt+KWfwwfPmLuCIeUoVNGMDXlRoUNwEF\nR/IXM3fb5m00eSdQkFXbJagqWKPa99Y3g6/LD76uN80HWgO7iQUWdgPBF3S4\nLW19FEFvS5Zssm17andhgO5qKfCfDm3g+0AnrWm1yZy8Bo4NGxOZrYs4XM3F\nbk+F\r\n=XWMC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7pPyy8D+pj25nQxU+8Frhqe6GcTDLr7LgmaEpmJcENwIhAMyhPcC1A2sKabL/E752/tvTOpSu35TEbedLjTzxZCGS"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.3_1570446526606_0.41881798402609927"},"_hasShrinkwrap":false},"5.3.0-alpha.12":{"name":"@storybook/addon-info","version":"5.3.0-alpha.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.12","@storybook/client-logger":"5.3.0-alpha.12","@storybook/components":"5.3.0-alpha.12","@storybook/theming":"5.3.0-alpha.12","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2e87890083774ae5a58343a263d248b019d7161b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.12","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-sBcHiWWSbzlpz3oY3lfnbKY1aqP1h8mRPNPoxX2Z/ESn2YtrAMJ9JuV3ZEDlBk/5kTiF4xKbErSaANjgwvWTRw==","shasum":"7fe47551d3ca5f3f720542babc3ea5ffef763777","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.12.tgz","fileCount":38,"unpackedSize":269511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm056CRA9TVsSAnZWagAAbEEP/RIC+eZQmu2sz0pxoUbk\nlt9cKyKX47LgpsOAmp9nxH12z3p+a5etUA4AbfAS0rBNxgYuR/9jKiLTyMor\nB0m7jdFP4tq+lVOIai+0GMK85qYFUO5HBCWaDaT34bWRDox4aZqq/dw5/YzT\nLWesowGA+3to/cV8od7No8BdzM4b4ehbf+MF0/IpJHp+fFJ17QytwTBaL62I\nJivRZvbZoEqemUt9wreZ/29DD7+oUI9uGnAi10tv398FOFGd3Y29+cylZhxf\n0VfmtgrkY4MG+btqAQOhnEhTmGPydliN63qtRflYqrbeuwTm7fXW/ieMyXpR\naIB8czFAmi41cgZRwzaPGpdjCfmuiAo3m0iVsFcPruBBstgQ3F3ZaNGfvzWl\ng9F8HMiyude1nRw8J/kVPePzcAbcYsreT2ws21CM2YJbgBCasuAsrDsff1s/\nrB8KpZ4mJJvoV7eUK6RXzQNXJY2T3dXdQCpct0VfDx2EYchwgzGjPPr3dFW7\nw5nDBVPCYl4dCAzY5cwfpUFrU98OVRrU0ilQgM/EnKXLCR+kPHiJS/PAcJRv\nDD8xyOd4f/LaLeh9XpvKlWO5uIB1vSY9WhzM8SxfIxADwOHpkzROeWNGLvxl\nOKyT4wYAvBX9J7viwhEjDOPbDAbnJ7bUaHj0z5EsAjnbYHfg0V9F0z6nzPEX\nxy6b\r\n=la1P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/Uuox2Wlx7UqfYWmZwwujWmnPcPXXAVa5yFMr6HwORgIhAOXWo2MJvd35n+ss123juj1i0nTgN4yjj9vkjgKqMmXk"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.12_1570459258110_0.6167713004301514"},"_hasShrinkwrap":false},"5.3.0-alpha.13":{"name":"@storybook/addon-info","version":"5.3.0-alpha.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.13","@storybook/client-logger":"5.3.0-alpha.13","@storybook/components":"5.3.0-alpha.13","@storybook/theming":"5.3.0-alpha.13","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c9d58fae8155fbac9552f3c6bee2347f0d1244f6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.13","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-vbm8c3kzIaZMjtAUcJTfu1bN9XHal/6vDzImQVon9mmM1LbJORa+MfAQ1ss8hKkcd7g9kQ2nl004i6BPp4ycyw==","shasum":"c24a9cf20f58b99715608b0d29829f3f418e3d78","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.13.tgz","fileCount":38,"unpackedSize":269511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm+iECRA9TVsSAnZWagAAemcP/Rbp8A2S1j2ExG9N1PFS\nMpiDCmWDxFGg+0FhO6/IeaFrR5XC3J/dc9EZFfC5U3GWg5rfPRB1J3wNUat6\nC3gfbtH+Hb0CcXLqUB0zSo9wqygfdYXvwBL3JfE7FJPK0SIVX6pRPHh9/awE\nvoNq1JaKug15fgA0i5QAl5UtY27sScr+HItOHo7bT7y8L4Y8SazK7/u1WvlB\nAl+pBHhTGQ+j+phhWlKZROKKNjml5BS16j6UqKfh4cFj9gxO2g+JyU2xRjN3\nRjPsSVk/jRd9Ku6JsTYUeNuywfpDyD81/t8lOLKcs92qsD16aBLCbnFqRRwH\nASt2FC6dsFt/wpCcW4rZ97KBChRcYeEDElLaT234KHvI0f5aOJONcqDfEnoH\nOwkhM76zsV3RyRv2XLHBwlHqbv/8jtj+1cFUu4xKdu6UDanh6YXfUonfCAbf\nTFR/xvY3sMtDFFERCWUwxy28qdOdEXL/XVTbH21I2sbVb2GTPGx576vQOpjm\nmJvgR2084ls2zk8JvKTB/2ozQD6MFYqqoUo3FpC+y3iq/aV0L9e2CVfRbMgC\no21AtEWqxn77disFCysMiv4aSj5GoRKUy2O5895KH2zeF0s+DCvd0R0M/MSX\n/QNMLT1yHzrOYFSLoCJWVC2pyMVFFBEPDRPZa8EXdMJx06taPhTZ+qWCZesY\nVHvf\r\n=F9E8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpabMLSHrz+UbcWiV2tedz4jubXbXb+6fedSeZH2U70AiAVotbMcWeTJAqnj+Bb5S9HzZmHxkedn4dILuEV2pKIqw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.13_1570498692041_0.9816714174462278"},"_hasShrinkwrap":false},"5.3.0-alpha.15":{"name":"@storybook/addon-info","version":"5.3.0-alpha.15","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.15","@storybook/client-logger":"5.3.0-alpha.15","@storybook/components":"5.3.0-alpha.15","@storybook/theming":"5.3.0-alpha.15","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4bd4888de89c3439b9bc2a39e725884ca25dfe4a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.15","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-vVmMCvb3OWopBjAB73ylO7OtdyhjoEKZecX2B5nzZ6izAxrS3m+c7UDQKhQCqzokqsOxhhlaiIKXKhdCf0twpg==","shasum":"2a6792b76d2e001bc1c0a062f699f36dea0817bf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.15.tgz","fileCount":38,"unpackedSize":269511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnGFCCRA9TVsSAnZWagAANWQQAKFmSjxa2EGRRjBILiCk\nqOOEkCVOIRRAzs//Z9JoSlVemz3p4detsrUzvi1Y+lu2DUV2OxnG8sE7OkvK\n1KNVC3KK8LbS6lXNTLvT2/ZXVh05fokrywGZh/uBBNnRA3Z24vxR9XNAPgTI\ne0reCzzErRb0C6CmwAbDxzoocU5eL9xWt9o153fEn/ak0oCjw0AnC6tfjwfa\nHmqsctk3mMhUEMAvYTpH/LXMveC5TVZ0FVDzETpI9PSDgOKgZ/8ktgzXUsHw\nSXsokXUBi8CxsHM0zuc2wvESRE4MBN/vuWVjFpz0wMGdri5d79dTBlMUIKyC\n+JI5tF08sz+lFXjeAboQsOzh5LjSADOzl1MwhxLqCjYC1WWYiURy5Rc2NTsh\ny+U9e0N6AjBpMrg/fk8i2jEoSBB3dCtIxWovi+VXjjhSVnSJJp0q0Xd/v+sW\n1GWY+gk44MwZo/Mm06tK6nZ2Mv44cqkalIGZnij2lTSSE3RjX/B0uiXrug7a\n/uL9pS6tmZlXpG9GG5tv6DHAzF3BBOlHxEsyv6MXvrWBJ+idOJm6FPG/MSQn\nig6EqL3PAs6W+8FeVv+VHfa1tbXT452AXZmtPZseYyii+QqthEar0rqsNfyB\nnCzdmsHVl+nzbdOEbQy0VB+GCwlyG4m+kWk8iYPEgCblwx1h1BsNnuah6SdL\nMFUq\r\n=ZNgG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCr2qj9Iuo8Q3lX8r3rIWDSxbozwGaZJXbI/d2Nt6LVwIgIg/tqw9Nul9lPc+fZREAP0cJmXA8H3edA4xVtfMywBc="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.15_1570529602015_0.28053537754674074"},"_hasShrinkwrap":false},"5.3.0-alpha.17":{"name":"@storybook/addon-info","version":"5.3.0-alpha.17","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.17","@storybook/client-logger":"5.3.0-alpha.17","@storybook/components":"5.3.0-alpha.17","@storybook/theming":"5.3.0-alpha.17","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e1150b9396395c7afac0185785ffebb97441bcfd","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.17","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-fHrzwuLNgr5G/B/UhZTq3Dncj0WAe6TrkqrMAfcbRJ+QGasaPfUjr4wBlbVSgaFJ3bHfZhfhpA1q2kMqDGUYvw==","shasum":"2d104dd5e4fc403f162ea3c146bc46c08beaacd7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.17.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnriLCRA9TVsSAnZWagAAAAMQAJhVFbjjKyEqYE4+zMBT\nJg0yc5w8E4DBAj8zloOr9UHVXyWuice61L3OWbH72o2Egfx2zUmAujrVZd5m\nwTL8HY3J7XWCH/sGd8Sxvii/GkxI+pHs7nve8f9I97+isAaIwHVCloBMeLqG\nPNStR/gnxXEXcxW54ju6/aqdo8Q7qzEeV4XPISnTabekDy7GR5CCh5+RMftR\nF1Y0woElwPh14YZSmOIC3ANBfuMg3gz9iabOKHHeqj+xkOaitP582fB0solz\nTZKI8IFhem4aiLuLzqBO26PP78Pl9qbFO9icmq1B9Zhzk/csPk1Hd3OAQuaR\nzuYr0QmCrcqUwy9L27p/Gtna8yWRUKo1qJOZ9wran8uauYKVTnfcz6HqvXsi\nYT15OptfCn7/5pzGbxFMoO5GkLYpKMAiPFO2fG/gBTzs96zZTMW4MGDDiV2k\n2FUSPoy8ETpqd0HmuCEN+xOki5yhmnYmEbsruMa+Ei6GbKEEOinXbzUsWiSi\n5e1p9AfiXeqFYAtJ3qs6Z4mEZ5tuDUc5NuSvJri/Sh4cjH3UA7xTTLzTQ/A0\nF9YLDs3eY2UsQpvToNUlKhyuIXh3NH8eHmdvQK657JF4jTkX+7DSVLRkDfYd\nvdMmPwcpfZyC+uq1TMdXEKO+/FjOiiaNlloweD/p8X1o5uGpp7WDAilriumq\nxq1j\r\n=Ljkt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFTQ8Rjy1QpFQ8QV0JpPb9OzF3F4DNVVcxVHWK7hVtoAiBSLEcf7fqgHswqtM5R54r3xd3vOpYRQFu+YsdKkZD7mg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.17_1570683018382_0.24431077111628108"},"_hasShrinkwrap":false},"5.3.0-alpha.18":{"name":"@storybook/addon-info","version":"5.3.0-alpha.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.18","@storybook/client-logger":"5.3.0-alpha.18","@storybook/components":"5.3.0-alpha.18","@storybook/theming":"5.3.0-alpha.18","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1a951739bc2b2d85f56fd49381174a4924b0aa5c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.18","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-SN+7Yj7uwXqAiQQ1pL/hTa4cjhz8YENPzvvjOn6a/wQw+/ERClJlvOpXXLOywBxovRJSe7gYJmqWxHXNoVZ95w==","shasum":"c68a187132f66408f610216ef6192ff3a2eb1bee","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.18.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpCmiCRA9TVsSAnZWagAAH44QAJWQJLWyKOL0Vwtwh7WX\nbUeqUu+N5hDgfaWea+b9tEkLVQUe12pmyHw8u10aFt2QbZbFLUp5PpVjsOK+\nkT7Tj41jOSVEi1nOI6TImjVcsi6qBuKXoe+ApAX0z3+hmB3Oyg+eBMyT45um\nWXqkgfgLgTo/s3FQTuxYVH9kTJtr2dQ+y2NWCFqgzYqX6URUMj+9YTQ63SiS\nKPjfVuJkBl7OEmvuIqaj/x5v1YoNlAXK+n4qEpGLOiVEJ3lITN1oLXY+mn0p\nQRncSfbWhxHWGj7kL2V944/sBvRhUE0uIBhMV9rvhkZ9mFmIPh49rjkMWD5V\nLEEB7elj2eP0lL/S59Z65xySGd4wr2miRhT8Zu4PJoYKxWk9Q6JI5mci43+W\ng3KVK26pCzfJeRSd4YKdvTtd4AHdcKE8VtrRFxUOfA0t0BhopIwJWZMJ8ZPQ\nIeYLGi2CZz6UOUdh/5WGaBUU3wlESXcM3Lr54zxghP/oZuRC1CEGfnvtxIk0\nI1k9QV2yzRYI+pFwXfhkZfNSDdHDlJmFPFR1Tb/neEie5cKToLcN21Iu63jk\n9moTiWBu9ZonziafC+XzFht2YrKfyzURtde5DQJZ97fRnyZipKeJdL6KtEgD\nEe5iKFSBfxDeMW6PwWDJbEDqkzO07TAjrB4HuokBXRhVfhc+DeP24acOhMd+\n3PT7\r\n=yllN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwP9wHxrraSkFiQiL1RyCRhFdgyREeWAbadwzhAwAhkAiBDWKAdG6bDOycXTUvn7J1YvrT3/qhT1Gt+8XdadRpQ5Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.18_1571039649535_0.7997678925207334"},"_hasShrinkwrap":false},"5.2.4":{"name":"@storybook/addon-info","version":"5.2.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.4","@storybook/client-logger":"5.2.4","@storybook/components":"5.2.4","@storybook/theming":"5.2.4","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"847110e3bbe21892c7d27d01f5d4d2f386e03e21","_id":"@storybook/addon-info@5.2.4","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-/uDYPRGN822M+8O0ZUTnmySG3aoUPOMTyUrIvF+Qb2pqTe1iCkMVgMtr4GwaJaPo5dZ9mAhSApQgMKhN6Qck8w==","shasum":"9484c0b20feabe8971112f7c55398ba090cb130e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.4.tgz","fileCount":38,"unpackedSize":268401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpEMaCRA9TVsSAnZWagAAxIQP/1Azd+BvdT0bgV8htlLN\nSPZZX2oGSb1mvuABGKWlDfREV16g03JKNEMnepdt6HEYA9NBMLZBWn+npbHR\nabNeO7AB9C7VjdZgx2pwQXbTUwyvjDD9ZCDvnfjaBxEuqpHEp79JSWork/XU\nLSmcqtR0uihQWMMCUPbrQCpn0H+AHjvi19ElaccqLG/RaZj2MU1BOB5ZxRZY\nzaGO8vtHLfGTf6VbCtq2w8uM8pajJI4l7AofxS1Po0ZMKbZ+WIskSmSQBptY\nBODF6LYE25dHAk5jqxLfbLsM+sW2j1BQRwIRoLDO7q6tqMUaNQId+Qerr7P/\nP7/SPgftxUGOD4CE5bMoM+F9igIS958gEwOBx826jFAr0LxoszHbiFQUXcyn\nZg8apE26qh+sqFQeBKVWoKc4gyULxYzu9d9D7bSKOulNPW6xz5Gd1LAsN6Ww\nhckMmPhMFrWBfgvDCKPCGA5bAtgR6gJX9dfFxGQriucSWyBoBMVjBTaDon0z\n1ZJ6sF2u6NI3WLPIf5dY6pdtkxipCiWuIQCYTtQiLLIaIwDA/SmvO/PoZVRl\n4GZUnG/uqMv41JTS6I6fhV0b3v7DjDD09Z3dH2Ju8/xsX/DpK1ttzXd05qZl\ngNS53szi2M7sBBSSoX8NQfu+RRdUqXiR9EvlnkjM27+9KUYU+9dV4wRw5yM7\n6gSD\r\n=gGtU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqscNiTrhXgjv2O326QRHkld7qA1okWxMaorQnNETWoAiBuXCCUz+CD+CRyi6cVd3E1wlvfQVWocPZfqu9dLrHB5A=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.4_1571046170217_0.5441102639228867"},"_hasShrinkwrap":false},"5.3.0-alpha.19":{"name":"@storybook/addon-info","version":"5.3.0-alpha.19","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.19","@storybook/client-logger":"5.3.0-alpha.19","@storybook/components":"5.3.0-alpha.19","@storybook/theming":"5.3.0-alpha.19","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"396d3ffaadca027e89673962e05053289ad4a8b8","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.19","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-zCWGhwMEYsvCZ98tTPDVFyyTnuQzM7YfO5n5iyiGA3xWImfb8xS53mBIDqPsQF3rUyxhnDH3hAUHZ+TTfuZc6Q==","shasum":"3d4904ee2dd4a3b91865b98c9b0204f965e0f84a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.19.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpLOBCRA9TVsSAnZWagAAe2sP/08A7pAqQ27Zqh5gDp9I\n+/PhNXQDyqAe2PEp7fuG5uHCZqEgla+1h8ef32/YpgFcnXiPiXsMbrP+SETt\nLa3GnRlYn7ythHxA5F87hpuHv/9wPV0AxsuHelDAeKsFAitUd1IiDDTTz+uA\nYJ0zGafp2bG+wgbyjPRMbtw/6A6IpFH3nek+mIs/WdUBgaHBcXpmsaatKN4v\nlionQORm5K5q0qLOxUoAsTBRbkhD2s3To7QSdLRg9Ouki734LgwtkAPtJoMZ\nrLkC1DZoUaGLBZOeQAfmoYyGjvw+5a+HVIyD1cnxr78FRxoAzPB6M0gdPmun\nXMqzN0Q4M25wT8749o76vnc9pJa4N5zFmace41n8IGQG07WMZMDohag/VqMv\ntFlIlDE5psFOxdOirGJdQtPiA6M2h9vjWFE/n9A+ZaglO/OjRPkCX7kkm8tt\nx0P+qx9uIokEINuMOD9xA1feLcWmDmfjLWGheYGTAnDu2NuGWaRAMgO2OMoj\nG93C/AwEWZDmTak7nDtJ/DQnbdcD4oZEzffUpM6UAA1i89C1RdFYQ8X2AUFC\na7fUHKWjDcNZALxDyQwEyBY6hek2LZ2g/lljJbl41n1LBHNyy0QteaymfioU\nvXgv2kFfjwI8r+l8lEqU0ofTip2OsfbjhWNDhXtIlzGuJk6xkBJLd8Ywridw\nf9bB\r\n=iUR4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ6YozizON8hB2JmFyaX8CXwWyVy01H6MJ617MrVvKPAIgNSxoSQRe8nkJZ9wgmv2mXA9NrHK5WP46N6wsd8gBRMM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.19_1571074944606_0.5192283515814229"},"_hasShrinkwrap":false},"5.3.0-alpha.20":{"name":"@storybook/addon-info","version":"5.3.0-alpha.20","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.20","@storybook/client-logger":"5.3.0-alpha.20","@storybook/components":"5.3.0-alpha.20","@storybook/theming":"5.3.0-alpha.20","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d340b29949a59ba4952ca20dbd2635fef6b31aee","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.20","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-swkFn+2deCnm+m1V1PfOo53tE3WRRFozhdbzJVAp/t8jQCp6sGldOXVo7hep4xpUjUDF2pyBZDBafzVcPOkcRw==","shasum":"ac89643ac567e600b109cd96dbdc1420743ba739","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.20.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpaRLCRA9TVsSAnZWagAAn5wQAIKgsH1tJeG55r362aIQ\nh0VKCZaVBMknimr/5Zc3DO50kIaxJe2V7fMWr+LfBSUQEU+vKqcI6B0W8C2L\nGHvbawbH6E2nPp8sCMOZFScMdRynlSkt3hBpL4nz+Um9WZ2lB5F9GNeBdkeE\n/RhYj/QkwoFrmUzYkRNSUnn8iQlDeoG3cJdnuqxXC6QfRtv/lOZiQO7WkLXP\nhtdNQSJOp4rEreHz+HdCEGaCmqURasn/MGRBKgISKEH4sX+RcMWKu1ORSNBo\nf/gJOEXWSRu3XTXpp6s41sRKPmEHTe79oIIMy3a1YzpAJXNLRTmumMg/FB+X\nK/x3i1tWS5CFWZBKS5D97ZubAVfEhReMiqYFzAg/rSfUsnTuczQWN679QSfX\n9Ppt+23iTw4PcQz0iV7MIzZayXLAgXX3iCOU2ThXY1z9PMpVIBsjeRHkvfyc\ng3trS8Wv2rR8uY4xVdLMB1WYBVaqaq2496h8wK/7VqZfs9ngSGsSjiW/dZDq\nzGPHIt3wfki1b2l0F8iUOlSDlYbCNb2svqsS7C2xD9vElXUK3P0L/xyvPQs1\n/jjzMzs14BI7URRyiNv+Cup4jjGsbqgnaNQdjCY2bVvT4MD1QbQlvf+m8x6i\nf3+qbhFtaRXrONebOQ+mnC+2RHGVvmu1bUhCRXlo2pj/3UspT0sqUYSsdi2c\nI6LS\r\n=e0oo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoj5rNZJYDII2VxuRbdVvEn0wwGnJgxjSN2t+ig/AMWgIhAMxVvG343ZIOTZ1I6EMc3aDkV0zQlbJHrRp5FTZFvD+6"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.20_1571136586830_0.6680009261364359"},"_hasShrinkwrap":false},"5.3.0-alpha.21":{"name":"@storybook/addon-info","version":"5.3.0-alpha.21","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.21","@storybook/client-logger":"5.3.0-alpha.21","@storybook/components":"5.3.0-alpha.21","@storybook/theming":"5.3.0-alpha.21","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"91fee993fdd694582e98b14035af282245f06a42","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.21","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-OKwtvPRwRmY6REwjQUAcH1tGlxlnG0HvJpOLQhcBplEhlIR+LdLm0K/xoB5jR+OXgt5euPV2WOWkCq2TYkilyQ==","shasum":"000b3b812685c8e9878ec6d58bb4bc38cda853c9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.21.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqIF+CRA9TVsSAnZWagAAlXUP/R0FpkxZZu/hDUEVMbtc\ny3r4OHkGUsZjjpcHXoZxFJYqQdMGjzd6tXj/dvXxOf8Zch3KCbMBS9jFELSS\nQ7+agTNAlnR6jcEsC1Y7LUaGyBhRBmFYGXU8l4GR9y9S7btyTDzuolmUBZql\nYPsW5/3r131U8uzxCK0VdLoNe+udMJo9LhZR4KEHe7jOSBlUZZ1Vlck4NycV\nl8VghHmZErEBPtkFzgFUitKPOfl5RNOTBWoXCjvsyNBF+8FUyKhvxectXH4n\nF7UD/i60wPO3j9/CdKw6pwizcvxHaEfZlTuYRU1pr2QIV0dxkI8yDNNu6VXM\nKvdN4LNwo/89j0O8D9MvIUPnumZgIcFLOAPgpbKJABRU4ZBCsAyJYawcFOet\nZuDeq3mkotToJdPgtK8lNFateLSiMkzDG1YdK3a+7wwuBXJa2o0T/9Oim1Hf\nVDhoeQGJO3GFc852u5PuzXkOEPCJmtQs9MTBfB3wetOzLLU/yoq5wCrfdsEQ\nxLXuYSEq651UCYafYMkHp03dnF9+VuMKe33X+YAirIMMf1u83BAiqcfgu8xR\nsMUEBDFC85niea34mNQJH2Ce4HEv280Laq8yZ1fbKC1uaGWcSVb11VfY71Gf\n98DOG2uhOw0pfKCVSiv2BsED+HSg4zk05OHRt19wWXRlRiXh+P7ag43ijhpI\n8VDy\r\n=Nacs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYM+pL+kC+MyG0m4cCz+fhy8N56+fl1ls5/72mPuSHJAiAjhZyHsQFKaMiYiwJihpZeKmGPSIs5zPv/+3jckMKrVw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.21_1571324286029_0.6420634539748875"},"_hasShrinkwrap":false},"5.3.0-alpha.22":{"name":"@storybook/addon-info","version":"5.3.0-alpha.22","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.22","@storybook/client-logger":"5.3.0-alpha.22","@storybook/components":"5.3.0-alpha.22","@storybook/theming":"5.3.0-alpha.22","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"83468795dc2538213a7151dab970aa0d781fd7fc","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.22","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-dk0oRdeYEsFJPRKvSjixX8tg/wDFgI194dEpU4yQmwpfTTzK7YrO11A/32pfqRNgH/SyRciJGH9+OGPP+wLU1w==","shasum":"7050c8b98dd02c6184811841e0c33835bf2e15ac","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.22.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqKuZCRA9TVsSAnZWagAANOkP/i/A3vg7dMq+U/9VSGt6\nEQ8/Y6pIaQnh1s8IV2pIo8OyvQKleKGHQSIwje6M0A2GM5lCIS6ePWc1vnIm\ngWiOkOSGxs6X5l19PLoL9vHeo/ImPWWlqs22iiwA5CzHMni7+5LGS2vAHv7+\nnYMQlWknLEi/w/Hg9H8wuXvjk/8kKXN/pu+nwtxvp4lGjTt94Zidi+vucNsU\nESK1SRP1WILmzJjMICnatwYw+nIyqEqRMCO+234XkFCPVLWcwIwBA2AqjVH/\nEV6HD2zTpyUOy8qt0GSQkHCqdPNp4brNG94Bsn//WO9UViqWllCx11TP2ng5\nQO2mEvaSN3gphgigTdB0WfHU7a27FNhxCwEXalzgHvuM0PwZdtcssR9nwWHi\nG2XB5ucrRJppjnjVrSclVZ7HcXd3SQCPTJ4baPGyGj88pPcwJdtOqIUQjuon\nxlnxy67InC76gZppvR5qXRh/yOMYeJSV9tM40lHvAnc0CZJkT6NK0eXueZYY\nYAwlKQQxQT5yRi7DRFYwxN8TTD78qCTM59kwTbnz+QJXQkDIkBpZkhKAZWHl\nBd/8qZ4E0eE9kre7U3eF/7rIIE53nKtxxa2fl5Lg2uZKBhCyRTqdJqcJGmF+\n7w+ROHnUBSIX3gNYaECtem3yLFCT48V7M5gGIwq0/d9mpZ67J+NF1t80gB23\nkEKO\r\n=86vc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgRApPofHBalqbG/DljdbrdZ5JxPGA4mPOomFp5P/UlAiEArZ4Jtj+HpsXI/i2upauYpGqI8dJAblMp/HPaWXx/Lwk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.22_1571335064961_0.8573120934592577"},"_hasShrinkwrap":false},"5.3.0-alpha.23":{"name":"@storybook/addon-info","version":"5.3.0-alpha.23","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.23","@storybook/client-logger":"5.3.0-alpha.23","@storybook/components":"5.3.0-alpha.23","@storybook/theming":"5.3.0-alpha.23","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"37c133e36ef0c518ba445720407312b6558c332d","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.23","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-o9pgPk56NvzKZsoJjqqblfHnbfnTnPe4X/xF5UVDNWPghLjzKinAB+SPzSS9H360hnv4Mj4oJl4gEJsjI8b6lQ==","shasum":"d7da5b076ab1ac61203e954a4a524c9c61050837","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.23.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqnbfCRA9TVsSAnZWagAACz4P/07Uf33TLxK5cDyHQy7f\ng5T4xjH/aKQ1JcovUJV0g0xdsN/mREAlkBe90YDlsPe8GSU0HAKTEpu1spI0\n4uRCjwtRCX1M4o0HtJfOIUy1b69jukRlw+ILGA4eAvN8/X71Dka7lN1sxb+q\nX3qn4DAAlArDHJMQ5nnhoQTFY9Ofx8ggxd6jOYpVMbuEC2orZ+nnLGHDWsmH\nvuWRPzcBiE+UWjlXWf/yfUwQO6++UbP1vT3VmlrZxzzWIfFJYHBiWC8HXS3L\nD7ulE9CZJ6e4195g+99QdG6Zt93Us6wrrZbi7pOgz0FQEymI/VJ+pZcQuwep\nmr7F29Db5blVplP1de7k536QLgYGqZAMRll+LGrONfyiQzDnNRZJmtMjo1EX\n7AiP52N1bdF18Il1fvUOLC77ht7E1nYrQ0FwQ9b9Rn7A2EtQiBuQRbPieq6n\nSlLycllljG3+ksANZzPGIHLprv2WS4QiGHzAyZucasvjZOEp4wgljDZRTE6x\n+uP0Aqkt2n6po/Q3j5aUbK3Ahqm780nJe/9opLSB9XTzMb53CghdlIk5uTyK\nfOx7mgG0vXo5LMoAycngP1+xlWWKpZ5kxrXCGNZy09i8nS16us2JbhwsIeK3\n0TRqWKudHe5bjTgA6KUmBLG/240bHyQ9WwNsirDcZuYTbZUiu3+Y3DMypfmd\nbIc7\r\n=X+hC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd5Bgaity+mwDCU0yn0x4zYD0bGfjkyueKF65ZWa68MQIhAN6u4RQ+x5yy1VPdyh9LXa61VflmBVR7KbnhoWndM8MK"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.23_1571452639163_0.9538174668930388"},"_hasShrinkwrap":false},"5.2.5":{"name":"@storybook/addon-info","version":"5.2.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.5","@storybook/client-logger":"5.2.5","@storybook/components":"5.2.5","@storybook/theming":"5.2.5","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6e80db697f865f833cf3e250573a7ce36e0ee02a","_id":"@storybook/addon-info@5.2.5","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-MGIROIZ5zXFtQZ6jiHwQM4DWvuWjeQHl+2Vvlzlu/p/OmwnImmO3ONNfhpHRefDiTOkBwtxqeYgKBt2MRjo+UA==","shasum":"ef651bdb03282d345a4515988af544314fe6cd06","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.5.tgz","fileCount":38,"unpackedSize":268401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrl6OCRA9TVsSAnZWagAA4iAP/jhNcUtihWAxNBMMUMzZ\nQUXrosBnCwX7btHf59VFZ4colB8rEykOP1HfGRXHYnuhxn2mFGfDwFeQBAUe\nEgc2JutMBpfmANZFQoFKEbeyDfzO/JOZzpfoHME0o8R8yMEcJkNl0oDrZtO2\nljPhSph0imXCobdViM5T09hegUdNadfKyShKL4Jo3OLL41y/xbAX5YlknRCQ\nKHDpQdb2yZyxJ3i5FV6Lnxv8tOkhv8aNgc/2eWqHLQs+woYYL79jsriKocXI\nPxuleYEuE7Kq1wyv1Hc0vJzvavPQJKUZXnLflLENVN+sAre9BTYkWMlE9uvk\nru+oSqe8Jo4KPcdgk/ISCnvut5hGJl3z12V2gOCAMShYKy7+TLgBn7DMd7Ml\nmGJgRb0fXY1+7W6rRzCJuUTo3FI+5mnotPTsU3KTEW540NkpY53jYhUUr2fj\nseVMCPsUJClzKVnUVRGoSQSj6VUNC0KL6a+iJlIQAU6Q2IsDoNrLAFkAcZAl\nQ3d6yIFOPLkxChwLpTHGclSq7Vfd0t2ZS932i0maiHOzaGzUrMVy+HtL931X\nB3yj76yXH+lRmIqtlUCqN7Z62c9QfKjuErw+wQLMWq6xdtw2rwmnrdlWgjb2\nwKaY7qycsdIIE3TQKSFJ4EWbECl0y63m+ME8bNUThijlGQdPD4v3h45+AS84\nQ5Xj\r\n=wKEK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQlkegchEe5q4tgruw78wJkwJODxFZ1YnmBD41LDmcwwIgUKVnxUS51sAI3iYbSXs9oHYUTdTvU7dOGNgm6gbIaaE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.5_1571708557976_0.2056832764123646"},"_hasShrinkwrap":false},"5.3.0-alpha.24":{"name":"@storybook/addon-info","version":"5.3.0-alpha.24","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.24","@storybook/client-logger":"5.3.0-alpha.24","@storybook/components":"5.3.0-alpha.24","@storybook/theming":"5.3.0-alpha.24","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4ffcd90c08c46c1ee6d9217ebbe03153e89fa446","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.24","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-J5MfJnot2U1HKNLMOz5Rbgyfez0zTDOxN15n5/krsOG0NnTad6wtBNx7sbMADE+qrFshZEx38b71fOYVIU+Avw==","shasum":"e63f6dcdbc3539b73c2ea3216f86f1021f1b3962","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.24.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrmM7CRA9TVsSAnZWagAAeOAP/ijt6LtJFnrfUY4BV1Q+\nXX4xjPHsnfbWEhRnCPdQuSBL/SPGYFmAT2MhrvZxK0tHx21UTMucqdVA0JP5\n2ZUfaun//c9x7uyf3Ne7O+rdvrNE6omq6UmOqPnaX2ke3O9lY9YCyngBHAzV\nOn2C0k+AA61vyjJYJgeSyNC5WY880COQFDl8HQc+nZ/qZW61EJ4awlvpMObB\n1XogLgAOUqiBYKQL3FP1xsdPYp4VJ9x9rTWoKOpNG69vD6HjQvEKM3Es8V5E\n+CaYqh1+uq4zilUEc2IqaBQ01lfa1VjPWz30ji2kr06XZzQgEB/nnH+Es0M2\nQAjH+aNYNNxexb9/4RJt1GNDyI+INAwhc9FRfViIRTw6b45Q5mAFL4BZXDS8\nWBjn0G6OiO4Q7sv3xdv5ik43GOrmw08gTmEqxq0FXc7o6pcjPB0ZYOOBAOnG\noPtwJu/polDjybtUNE4bQAUYcGNrNZ9rouGPEgtGn4wzD1S/E9dnFMaeo+6N\n8OKXWbC0hN01CHC5rkGHDMUSk6G3ape76d1oPQifUk8Q/brIKd1cVJ0G9OPF\nr3gJUZsfLw3aiKf2rP372NCm7a57mu/dcyl9hDEml3qnG4oZhW5oiMZtHPnQ\n3HsYfuOPmJIXjLKVnLmORu0VbPqJH5Kj87C0UyC+RDGUulgbZ2dbUzyrtzkD\nNMvk\r\n=4QvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDeVJhpZxlbqoIva80poKpn98X6yRBlC11I/ObmwGGYnAiAornicwBGHldLFTkYytLOu2A3IYf/hm1D+7rBtpa0dJQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.24_1571709754803_0.4665177094783446"},"_hasShrinkwrap":false},"5.3.0-alpha.25":{"name":"@storybook/addon-info","version":"5.3.0-alpha.25","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.25","@storybook/client-logger":"5.3.0-alpha.25","@storybook/components":"5.3.0-alpha.25","@storybook/theming":"5.3.0-alpha.25","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2d1d01886002b6738c974c9529f5d043e0faa6e3","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.25","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-ro68njRv8WrApRn18TN5VjWTpj0TKlAlwW3pq48wvNCkfzFN+VuaoAXkPqVz8fJ9pMb9hy1dCmSNMAhC6BLo8A==","shasum":"539a6022f34cf9a3465bd55bcccb3ea751249ec2","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.25.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr66/CRA9TVsSAnZWagAAE14P/1rxKo3HhX/qYUBT30Io\noxQW2mLmQIot8j7qvO/nbSJydTQPDke1YYxExWA7FPtvoxMGKHsxA2XkT2He\n4Lwc69Y8WmTCCcmAQFHYHdGkP31uayzDoAh5KAgWcl57YuWcfs0dK4ERIiYj\na3E035fFk7xbBQzKIdEGcVraYAGRl5Q53848wSSKxjmFjLRiJpNmtnLC9ocf\nC6JytHfYlklpPNxPGZOAE6i6OdCmOHpcstfJPZxFeqXZFazkmnx10bLyySGZ\nRZqOGSWJPgV1/orbsnhcaKQTIGjTeOMMFSh/Atfd8aWxNFvj/ZKIOQQX8vfp\nwJEsBfjwjjnnuftMsOKq/NE20OG8/FHBxSGFfFTll+zxgv5+Phn8MAt+mGYk\nhCwONViYV0q2pgj8jP2reR/Hfkls28qwuYqIx01H49pbUjFfv5v65X4Eq/iA\n+pOwgROHFHgs4nKvxZr27TW3LsTVUmv+iifPPN/NR4Cf/xl7ydBUQCSjcPWs\nr7vOVUhCdL7cjz4m1wQJJ2NOCrBuYzbIsuJH5E/NMBW7ZzRDtZEdS0JLoTc8\n+Cu2a0VCUXEDgdNRttw5kciZIJV+BPFicPFjFIuzICLXKINyHXwCr+kaT85d\noXYgMsNgL3QEyeGnvtXc2dHe31agwLGolgMj+pmO8vWzfTEdZmwOGHZljuC+\nlZQt\r\n=87hf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtJa2FwK5kcKT6IBd0uRnjGNo2M/vZCGE9srvfvhOY/QIgJFudtTRIZKlK3+LtTyFVt+MnNGj/2PAnUEW+WMhv8wM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.25_1571794623294_0.745444782369189"},"_hasShrinkwrap":false},"5.3.0-alpha.26":{"name":"@storybook/addon-info","version":"5.3.0-alpha.26","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.26","@storybook/client-logger":"5.3.0-alpha.26","@storybook/components":"5.3.0-alpha.26","@storybook/theming":"5.3.0-alpha.26","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"98f3e2c6df7ce857dd33b739897548d331082234","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found at [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.26","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-rui+T2LQE7FDoaIoVA8o3BvW9rA/GVfrbq/Ke8Bj6Mt4NTN4m1gGMDVYk8nwxdlvnNwMuTQOw8I/eOaeq2OUEA==","shasum":"0c7bcc446033084951ed8eb48f182ced90f7c823","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.26.tgz","fileCount":38,"unpackedSize":269537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr7iyCRA9TVsSAnZWagAAm38P/2IPm2S9lOaZHQChKA5W\n5/o2+vRKN5W6xcUBThwczv+gCagr9vA1h1BYadnJ3U6X5sSTrAY+KSlFV+nc\n2MVM7gdTbSx5FR6Qy+N0iBGiLXAaqN/ZFdAEjQ3nadeRvvf98VW79/K6dkJ7\ntj4QjULTZhVf+zlFp9ti8n4MOcDrMnuqfelCLFufR4mkihXG6L/TEQZd/Vej\nVpzTuyfnMvy+6k5JZrmkQnXUsPTJbgd4sJ4g3sWjVxdUbp9Fbl7UC49C9bVR\ndxeODKGVyUDGaZ/egOsKK7YHnFVx+k0AQ4fkk5Nkvj/pDrnucxskvCxLy9JG\nLxND2lm9cwvUWiq/CMT1qTmd2BJaUh13ey+fGQ303W7AUzVu/pk1urxOwKVW\n0tWW5SyhK7LeU/7lfAc1gIY+ojCBdiv2MSBOJT4+OVpk9qZ8CMr+iZxCwwEm\nVifyiIiPjHZKF9Cd6uIwlCIJcbCpLvO1O/n0XBW6rnmV5qMkVNehUWDjvM/W\ns0myWoRqKTU6AF/VzFeG1m7LQVhZd0Av+Nl4K7gbhrsRYJIUyGmwu6neTZpn\nWsdbDEFjFx9LwFwn654T3EVqoyWbdXPvb/VSZX0nBaS2vovTsAG9qXDdzz+i\nz01h+4TPwbs3t41pWrOqpyMdi3cSbkXJ3440NNxQAtf9L3Pn9STkMyE1vQC6\nGQmi\r\n=LldQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHo7c0TMDmKtEi/93hrVR5Xb+A6TJEalJUHSCS9DAcveAiBrSgEVFSLM6onU868pMRYrXarx6wTVkcUoctudyLNw0g=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.26_1571797169874_0.9171282006227492"},"_hasShrinkwrap":false},"5.3.0-alpha.27":{"name":"@storybook/addon-info","version":"5.3.0-alpha.27","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.27","@storybook/client-logger":"5.3.0-alpha.27","@storybook/components":"5.3.0-alpha.27","@storybook/theming":"5.3.0-alpha.27","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6eae4c491bcace9d289cbdb5c58b409052d6c447","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.27","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-j/rbgUuZA1usmNKkIeQ/vrdV6GKk/NuMo0eZAH/98dU8QTmeJuDuV2TmDPjcKM+YX+bJn7XMMXjNdcYfS7kHOg==","shasum":"fd1eff6f1874d3f8b1778f6a8c73d153c2579e77","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.27.tgz","fileCount":38,"unpackedSize":269503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsb6XCRA9TVsSAnZWagAAtK4P/RswFL6B9EW63mafSKby\n+X2pJDCIxSbrGl+Z26kmETaGOGB0LsIoeT0rkqdHQsqhKjoqDhdJ6Yx8a6jG\ng7XHI6CWCTdN1KlyG7OUWsVFUxynGbf/7VBP0r+z1cp9nwBybiey5IDBqfco\n5jevFveBK3DPXqJVN7H7gB0UaVqpuqEzNSXZaf/La+o2e21eWM3Jx/Y+7te2\naTX6J1I0tEj653AqV4Mk+UsW7Uyl5Hh1DKfH0twM3HR3TK4o0msNV5AVoyXt\n/UC1QedLXnVeosH3dDJPC0q35R7j0yU99NKA17A8yQvycFprUQ8Xj/Z1Jeb+\nRQXV+WHskptD9fkYEDpNDUK4Io9bJM+Y6o+mWslaF5au6MxW/Tdp6KCRZnBs\nbOaCyxJq2ZdRM00G1NhfQmTomOvgLRGRlyKs04n16qY0pPsQEWODCS8MFZDE\nxUDNbmQak9GcbCyvuYp4+ldzwwgp5klUJMuH9Kfq5C0uhysmZRCM+0aDegSc\nPu2cXl463VY48jkzmOdHFOZpoNl2T4Z9cPEfoQ0Zo6Q/cRN0/kGKChQkk6E2\nfwxgzBeKNiHtazta3JhrJBWXdOoXewTZvcuK2w+FhwaoGxdBpxi6yh5F4UsV\nh2TUHNEd+j0abJSrBJsizou4G+h35715QAucFO7nAixobJq3C86VAnMN0ZKj\nW56V\r\n=cHzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEvdAVrY5dmJ4/g1S2dUTjitG5f5pLqdrVpBwHjncHRQIgZ5B9Iak7CtSez50MBtlcplcR2ZLeiMCjJFhHWGn4qak="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.27_1571929751421_0.681528828462935"},"_hasShrinkwrap":false},"5.3.0-alpha.28":{"name":"@storybook/addon-info","version":"5.3.0-alpha.28","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.28","@storybook/client-logger":"5.3.0-alpha.28","@storybook/components":"5.3.0-alpha.28","@storybook/theming":"5.3.0-alpha.28","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aaaf46873b4125fc6ec05589a8ca57eb9356b3b0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.28","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-He+il/fzBGOWUcKaosBY4XXllDg5sXpre7aChw6l0ST/irybvzvQJx6IazGq+jIWR2gm7C9t9RhIpjUYaMiCdQ==","shasum":"48db7f56374bcfde69f7eb7f41b5d5e7d8e31746","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.28.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslbeCRA9TVsSAnZWagAAHKcP/i8KtyjFLOwskEzxvuIP\nnmMCpaLdLWcnOslDotG2TFuTBO8q2Vkfv97ZyHZ8mkF1Hs75hGPJJnIRH1r0\nQVfJlsWKtGmDEs4ofne3UgvEAyvHUDmmyIxSeQeQS/6IJ4hzls/1WbBzWcjO\nCLKbJ6fKrLCpsLJed4W3aNTqQSSFXanJMmyRmVqxK808C5QdaAlapFIGwjwQ\n7H9UcJamDiau7+sKnRGABMc0zudLaqT2JFtwPpzH9uCjdE+rqYTMPO1T7wol\n/pR4PBFuaf9RuVVZ2yJzFQASG+LtwTW7y31MjvhPOCxUR6a9Tz4vNONcPAxx\n30pGYLDS2xSZzxO66DFz9tI6Sq+nYU5lD8pXkUvPQIjOs12chzgdSskd2qOw\nRXzICO3Q6eMcBbaQB12+WI1PAqPlPD3sYucDbjWfZ0jkEiIUDlV4tkwwxD6s\nIfuy/RKDY8KZHKTw88/v6GvKYTXFpSDU8iVKMuA00s16ZSfjg7E0lFa3x1qY\ns4WgGY2/IlYzaMUuWRGj9cCdO7bQv2crbHE1OBV50VXaUVRPh81xf9Hv61KP\nYHR1aHiwSjfaAnP93fpdJT2/c0IrcTokHXWTOmYPml5R+YU5BWJ652MJ2XsW\n5AToAqA1fGc9nsp54/maZyA5tzXSoosMp9Qy1zM8bkuxFx/bX6492GBYCDWP\nbDI/\r\n=daj7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaTZylPGs5xwEnkE9NNY7DwPUqeDmb94gUyuP7mCdeFAiBnVHyr/IMYj6w5fc5dNDdYYCL86e7M6CmhQp8zha2oqA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.28_1571968733916_0.7023794982749425"},"_hasShrinkwrap":false},"5.3.0-alpha.29":{"name":"@storybook/addon-info","version":"5.3.0-alpha.29","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.29","@storybook/client-logger":"5.3.0-alpha.29","@storybook/components":"5.3.0-alpha.29","@storybook/theming":"5.3.0-alpha.29","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"88a76a9a649f44b66852f28cc801581c9b6452b4","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.29","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-nTTgRweA/ZvGpO4lautKZPDEHvfhEBBBCGs4wTJ8lNq1dTfo2u5+LQdsiHd0GvbW2KPFMxPoPEeLhEJNL54Viw==","shasum":"4b516f00f76469f73b683f0beb3477d2461944cb","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.29.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsqvDCRA9TVsSAnZWagAA8r4P/R8VFrBOB00O5cwCCS0U\nUWp9beIVUh5ZOzfxv/Z5pmKMKHv5MA8mOZ3m7nJcAUXKhhgG3mAxSepYwd1P\nBvGHtPDhD4FSTi3uoWVIoh3kGNGhaPSSeOyC3ihRdcpkO7+IyG2D2bU8Qbd0\nPexUkazlq7lXkdjGOE/aSYYiEHYyFyoH/A/njLob0OoLF8pWxtaN9OhJosch\nwha2+xyS/YV2xEQmQN1qD1zyxRJVHeckLK0Mct9z4zsZmZ7C1Hehlkl+dhsi\nRD1gb3MgMDlreBQLct1tJtKXX4Zrjk8Dpx+aLmlK/7BVGVEL7vFYUFVdnGLU\nEhHL0vTTiMv6qwYBozWCIdPe5jlOajny4LybXfYjDu72A2yCnvVWqxWOOJh3\nxk1Ur3NmQkSl0tYSRkwa/TBlPgVzzYl3k+9cnlBKxji15uwfWlOxH3P0G4ct\nPy2bzvlL9aVydm7nFzRJu3J7ZkhMY+cSawg0EFW9SlAcV5bGhANNEaq5TOB0\n3da2CJNkfWyuSAZosjzf8f7RWD64DlN4mPQx3CmrfgfQScxEIFQhm+rxspoW\nZx99EKLG8NowPEG2QwDUkFrcKNIbtlYqkg8HGXuW7yvDxafcp9Tz6es0is8B\neIWx5/697/DLtlkhicxjIXfdCmRh0lQ4sHcpgjxCf2JuX4dRX9jkg9+lxb2n\nDyXt\r\n=Wz10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDik5Q0tNjFH/Zh059gPfI+YTWWOtP1qwu3FjKizzS6ZgIhAN0NPK3WwIRhQrMIP3qJBNZFvq7A6mzIiYu0Uc3Vq00N"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.29_1571990467500_0.59881018599157"},"_hasShrinkwrap":false},"5.3.0-alpha.30":{"name":"@storybook/addon-info","version":"5.3.0-alpha.30","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.30","@storybook/client-logger":"5.3.0-alpha.30","@storybook/components":"5.3.0-alpha.30","@storybook/theming":"5.3.0-alpha.30","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2f7ca41b356e03865f71897d5b2284679707246b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.30","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-pPWl3wGJUj0+LbYNQVml+lrhHqDI2xTn5Ofc774loHGQ9Hxw9llrxHke9A/VR0KiOWv0W9+9gTxcjWuQYXA1bQ==","shasum":"853a78bb865289d704b80e45da23e5ba1cc7d4e7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.30.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtHInCRA9TVsSAnZWagAATZUP/AskKGxpK6ypN/JQzlsX\noR4fqBox3ivGgo8l5EXZ0oYNHEzvj4/yxJtkLsvfXfPBtM4LJHtLrAVtdBZU\nieO2f58eFz9C+9tOM5VTVaHkFafLj/6AnfBkNsU0/97mu+wqjO6r5y6eeoTE\nQfbisQguBJyS8/TJZ0Egp/FY6WJJuTVFHB+Nz6l0M9TlMkTn7eqsJsr8cns9\nXG2+775Ehj8Wqpv2dT7Newm6jnr8At9PZLLdrYHT0KXjOTVFjYlIGvElBjJ5\nbeIFtFa2izhFcshyN/MiQlF0IN3L2Fjug4j/IHbCwTlg2PmOgOgowdNUCKSo\nTwRjEdE+NmfZSGKXrQvvfUEltpeqFyiYioMFivhr0oc/S9ThDLw4wPw7TZaE\nYdLMG7VI8yfm6sxykhTt0RxsfGaS9YZENV4tOh0GM4uDiVf6YhyYzE00+vx2\nGEwKMU3wsuTkX8ChEiX4Gkap0teAXvrML3O1g8ntBQUViJ9YeU6/+C9u6lNC\ndPBuwM0lLg0zonXTyWRpOawb74o1ekRrg3KYQecOu1wb1oK/fUPlS2PWALMv\nFQMdnyzhGs/DeD1XAWI7CW9DIonMBLhRbpps12MS+WrvC3f8EyJfPlUxo5QP\nlKjBq3xDh+EFftJCyKvbCBqsu5urzkAnwWM/PZalAW5ZbhiISh2YqCJLAxHW\nCbQS\r\n=El3f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3ssjYY+FTN6N6Rx/oXUN3UHgLcpCUH+qn0bLo9vo3XAiBXpkNoDj5eK1VNlso0bCcwB278XHdsmvAdASZXyRTwRQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.30_1572106791391_0.5729016515400762"},"_hasShrinkwrap":false},"5.3.0-alpha.31":{"name":"@storybook/addon-info","version":"5.3.0-alpha.31","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.31","@storybook/client-logger":"5.3.0-alpha.31","@storybook/components":"5.3.0-alpha.31","@storybook/theming":"5.3.0-alpha.31","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d92ff8900eed830ba324067d765526c03ebdf07a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.31","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-QbeF7+myRBH6ZHzEqII6Lgf8J9K+t1tW+p54UeNoqugsLU8LevdTmE9LPKtOw7LAX3TdEB1AHsaruGqkoJcL/w==","shasum":"9d64509eb8b239c0a0237a6105e55a7df478158e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.31.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtIYsCRA9TVsSAnZWagAAz9QP/2ZqGrwitKLZ4qprwYNw\nafaxXYsxg/PG3E5c5DFhDOg1PaKpxr5NL/NpUcCzzC8xQgZUTRm0OpitJ4MG\nZZj9sRGLesGXLXiK+MPWr0Zhy05fKqlIVXb8nhAEfkT7FaJUUcfeMXZer9mx\n15foTCTF7TxKT5z3s6qruGgLyAo+Dp/NOmFhbkeKolnDTBrErj5xFXqOk8j6\nRt3TNJeUJJc1Pj8MZLRSSE9nhVZRsHz6G43k5L8W2DMW35m/K2nqagmjmmvQ\nbNo9gfF+6/JeBEoqmGdtG3xfCTqxS4ngXCaa1W8Oa5ZaTPtlGzTGE7de+GkD\n6mIF4SGKEwYp39AmrNz4QlRHeuXC6f5HKeLXpSXu0zQkbIkh04EfZaRaku65\nxQhoTTaWtA6jyG/01rKu+wF7eFCodXnQAUiHcFG8HwkueDPXWZg3z1w5Hht7\nHy0GuDVQpzPkKS6srojC8aYdJJRfzQlswYl7mrWPmtx+xC1tOK2ZUHhkgn0U\n7+m0uSVv+0nxypxJVmVxvXJb84gPtSN6fzpVdIYb+LqVTPphFy/rbp//06qP\nCX2O235UsXqOhkKrXgkZoX2f0tYKBS1cOwU729xZT4TV6j4TETnzNz3Y8eTF\n0T7mENdyouANqKPdcP5WnYN/ppM2leYj/LjWGs9AJU+xgeW3HnyyBkCe5EFf\nHsuv\r\n=8OIX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrAKLD6eVwfQdm5teUZyi7vRy+fzhyK3gFLFvsyGdwMQIhAKAiIgR+MBiHsuTi3c6RBqqff8dB50DO4Nx5S1/R4yIr"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.31_1572111916160_0.9273551547900336"},"_hasShrinkwrap":false},"5.3.0-alpha.32":{"name":"@storybook/addon-info","version":"5.3.0-alpha.32","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.32","@storybook/client-logger":"5.3.0-alpha.32","@storybook/components":"5.3.0-alpha.32","@storybook/theming":"5.3.0-alpha.32","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5de291a862f2951d5bd2e8629f06e1611cba4acb","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.32","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-40swHYTpRZH8lTDBXeMQIx+kmS0hIiCNI4OT5kTe86Iv2ajqkqRvnhLpyNR9SduJUp8U39d78CbbSLwG9Q9ZhA==","shasum":"684dd9d00be7b9284133badaa2b47690c1523402","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.32.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtex2CRA9TVsSAnZWagAAV3kQAKCx21lXYH1VEPz9ykcD\na2sIG7VHn5anoYWMTDGoATy+dm/F18xHl+qbnX+uTTsxKGbFm0ze288Hjz+v\nx0cPvOsBbb8qyx18ni9CrVd12KsygSENuaUaCtyIJf0RQnwaHCyR6A52GsRt\nQ8SJoXlzqbt/UuofcRTC/kw3bDm5BqnhDpRu7SuA2pjiP6jaCkE6SI0I6omx\nC4l57toE6WfaD9+98r02g8LYtN9RxB+H2GRujlW6mhpBSP3VUTJ4Oh3ouhss\npx8yaxI3If/sLWMZ8NY5oQ6xHUiI0Bmv4DADtDKlD41BJTXwGJZKt8lzK/Kv\nSUwn5SqN6LH3vWP7oHTwHZAGK4Yv75vyriIDoHb9U7soHNKYhj/Ch5GOihFp\n/9oZ1bSu+8IOUqci1fpFHOXr5vq1rGsa+A0WZI+YrXz5OPzrKnG4UuFwTWwn\nrDZffgroa6lold2Qhjdc8pLw+Di2IODXQoihr80XwbTZxYb37TaHoMTjLOLX\nzcRp8RGfW01PPzNVI754mSSTNpWrE7MwzpTsLN2pbBeNLL4rKm22W8da1nkV\nZFnMTWtqG0gu0FHw5mCjxGlHhHL3Vu2YvKDlQvGG7xoaf96pwlxEAoyfWoJ3\nXg/SQoPAPtte+1SGcRv4nj5JnzSLBUVjffQwKQ6bHqXyEx1gfcqjGP4u77wY\noluA\r\n=8hi2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARclQosgUrYnPoj0mL0NWG9hH14ktaeFxRLEUa1IyeTAiEA8xx6wyt3j6OgDjom5ywkKoFUvy89PGB5QxtVj12ynI8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.32_1572203638290_0.20598726511252052"},"_hasShrinkwrap":false},"5.3.0-alpha.33":{"name":"@storybook/addon-info","version":"5.3.0-alpha.33","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.33","@storybook/client-logger":"5.3.0-alpha.33","@storybook/components":"5.3.0-alpha.33","@storybook/theming":"5.3.0-alpha.33","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d7d7992bb4b2e2fa4f98ec7cdf21bccc3caf03db","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.33","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-J3qSUTVwuUjV0mwAmkCntHom+zaDYuw4pjlwRmnxOmpo7EB/S1G04bOtjDVlnO/nkde7BtZM7T/milJHhrfE4w==","shasum":"d4aadac8c2f2c67c6b6520cdb1b89a8532e9c8b7","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.33.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtkrMCRA9TVsSAnZWagAAvjkP/3Kq+BkFEk7FENbZeKuX\nCQKjn6/oJh1AZ2EXzlccaEU8tYF+uQZiQoNhYrpgr55EtCmnQpeMGd59ZNkk\nc6U66nv68Mlx9GEZ7jrAtMv420gVs5rxu6nLZzSl9uj+0fZkkNNUd1pqiwir\niReVdaISpe47dYgTYnw42k5CaUufT94ISPiZDML5VSsmRvf8vAaCXxeoLbgb\nAYtMaOGLRNXWdJOiiw2+YPE03PQnZVF1FPGi9/jI31EMfVuN2NN/6XstjWTr\nFv/B5kzU26jjLF233SizWYacIgZzqsxXQDfrcj6oPDAYr/JYsdaJMGr3hZSb\nFS2IGeN87AL1qottafCdacihUKqn9IF+fu6i509wXNxOXHcWnH2TG9GvCT8r\nxNnYqwYW/Ian6nV0xICWux222iRYdC03eqh4qFIvE8pSOrmE9KEbZ5rC/Ww4\nyG2/BlnBrp8FoaDC6Bit6/WBKOjnlbHnpQCFxS7MtyZVsqFTwKAigtX6QgDQ\nuOYX0jnN0lLbP7hbwZcWEEV+IDTbw+TJY2hOgM3FTsOy0YXdmrJkDIHUHoVw\nM4t+v3nZmelTIFC9lvtSo8UsTVsdTipMUpBvI7Us8e6pEsOvJYB2C9iilxhq\nSey/MB6DfHoay0Z5sm+tb+4DTZWiGT9RvUQhyjqQy3MljghYb8SHWoO6NOSL\nk68/\r\n=P9ZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdUtmMWYMSMrTOdJZatD6uwbQ3Vtjy2VYJQJc1zoVC+AiEAhBc5zjeVuR/M1W40Pv/PeAzTQbvvorYG0guI3gF68Dw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.33_1572227787725_0.657141534750717"},"_hasShrinkwrap":false},"5.3.0-alpha.34":{"name":"@storybook/addon-info","version":"5.3.0-alpha.34","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.34","@storybook/client-logger":"5.3.0-alpha.34","@storybook/components":"5.3.0-alpha.34","@storybook/theming":"5.3.0-alpha.34","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fbd809ea526e629ff95345942aebf0bf21cefdc5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.34","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-yNYPRfd2DZoG7Z7pHXJIhJy0EnTGGbxPcJDZP7O202vL4onEqu4VZD9NfFDGV5f25+JwIPOS8nCdi2Sl7U+IgQ==","shasum":"dfd5f81649267cdca44c0e8309b4c0e68d7944dd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.34.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduVjDCRA9TVsSAnZWagAAf9sP/10ah9vC2m+cLGQRE4kM\nnI2ToXIPhEemnPresgjoohgP5IN7LUJRl+B6Rul4RkwVjHLjQbsbQnFFfWTb\n8wZQcL1vyK9km0bdB0TadURAQVvE4HXr47Axx/eSluEmpcba5TMVmlvDls5X\n+c0+wSA+PGWX0pgBy5qCd6u2Y10z9W4osTyT62kR/0ccn+Xnbrqd9DV9YehI\nWDIUADoMaQ5qzon1ku7MCTCUT8N9LqhnkMvzF2Mg5nc6aw7CKH1f5wNwFUt7\nsGzNt4WgGntsUs6yzNe1YTnChMhcWHBYSsBkssW1o4gFaG4jQSTXRB3x2KRC\nFVgYzr7DBW/ty4XeIbwqTG3bQa6L2MQ8E+rKUBnUmVSAUeRNFfg4h3c5XiMw\nAP9oSRk0mAX8d/9J1e/yUZxndzbdkvjdwe3phumPppj2+3EehQcYVw+2yQp0\neGUNOkMAqIY0B7APAf5G45UFI1Y8GsM7X088XnDt1geU96KWFQfCGbNkH5Q2\nxC4tTtxC0pFECE1JVyKCcMS4UuVXBUJwOfpq3vRk0i3ssEZzA5EIVCzh9xUm\nCOXJPBxiSNST5jIMY9DPB2I85a/yGujll7VS7SC3RjUT1npXxqjh0YLvDjMk\nytHD8yyH5vVMJ//Si1rZNH5fmweTEY2CAnoiKXITX7B4UPNCLIaMqby42b/4\na2D5\r\n=600c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEX6Px5WhQqjkDNO+/S2SSVpSnBFBt+DJ8tukezkWvPUAiALmnUyLHKm6oXm1lvBba5dMkq4/Nzv4SNPrOwYtFLtmQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.34_1572427970530_0.2108705031649989"},"_hasShrinkwrap":false},"5.3.0-alpha.35":{"name":"@storybook/addon-info","version":"5.3.0-alpha.35","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.35","@storybook/client-logger":"5.3.0-alpha.35","@storybook/components":"5.3.0-alpha.35","@storybook/theming":"5.3.0-alpha.35","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f1749b5824776fd5f8bd773d0b7efc6c6289d14f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.35","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-eKzFgvpTPal5nR62A15ItLaLRZ+ng0e3AcC3fcVIcmVk5xEfyqRa9WR4bQ9bjfBdiZofBtQFn+E2ioJgA+vcig==","shasum":"066e2b6194b8b0b3be6b41ee6631a88ea0fd6cb3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.35.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdu5DOCRA9TVsSAnZWagAA7fIQAI4OwEmM/J/sUdA8C8wO\nLbritPysHZtyhwKrSVXokzTJgG3qFecEVUZwKpBXtyOLCA+Vk6eH+rZ3/KWt\n8ecBuwQ7QeQgybpzRe8JQmUBrGW23OwQZl4pQ532DOIFLQvfKcXoQaOB5oGp\nG5iz5gFbQ9+NBv6wW33h4cpFpc0myiVMvdeHyTecoP6sSuVpG26nLujGjYdi\nFfexBlnFfYL4jgGMWT2wuGohH4SH2c+2O5tJlHeu2so3+VlZGsQrJYW8Y+l/\nBzjZ3F0u/HUPHpojZVvT3NzDZqGfxXQJMa4PpL+SLS6xkfZOFygRut1W+RCz\nZtFvf2xzQLxGnHORwXmftqyaF9E/VhZLEjH5WV21MdT1xTLAoEXqr539MPul\n8tE8UxIWaRqUZMOlfbeEiSE7XKVqIk2CRlmKeyaFqMpptniTzzDpPgeRYoDv\n3ROt7StXgqC7M0+xu3DlWmFevuhDTMfYPmE4pdEgO+hXa7nu7tUgcC/PXjUW\nxoXVRi35Q4hw6jTJ0X3H+sOqrUBW5/s7olC7Oh1Bb82RZkktcsDx38uxTKcc\npxX6AYfQRej8Jx8BiePwI6pS+qPoXH0Y/n3weCt388jET3FJG2KqP4VV6CFf\n/eyMJE+CBczUaysPy/NxrlnzaWjbKqrW6SgWeNDbonqvkgs/5DF0q7Mo/bYI\nY/UJ\r\n=POOp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICK/I6ezFEwXCBHu88nOkMIy+6xvJzgMjvu9xUiolGxlAiA2bVVP8JHps0lFk8f6E7F1yslNMgVEJQ42/d5G4a80BA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.35_1572573390163_0.27215507802897787"},"_hasShrinkwrap":false},"5.3.0-alpha.36":{"name":"@storybook/addon-info","version":"5.3.0-alpha.36","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.36","@storybook/client-logger":"5.3.0-alpha.36","@storybook/components":"5.3.0-alpha.36","@storybook/theming":"5.3.0-alpha.36","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ccafaf46d4dece4baea0536e9e3c2920ff172b5c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.36","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-a+LPZNI2VEnItTPYgqOEKY95Fai1MbPnF+9c8QkNuYGJu6je5QM0/U4BmcfXzlr/619kRdGtGkWbjsAGpPQrgA==","shasum":"47ae92a6c9e7712dca21a18efb1a8e4cd9ea973f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.36.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvG15CRA9TVsSAnZWagAAwxkP/jHhUI1zdx4KtkoJVSOx\nQbRo0koPwD/55Oo76QtgggdWCnCcPPvSUj9hXI9+efoozjmRwK16KFU9aoRs\nkwkEie66CRO99oAGyLyhmy91qB/kl30RkLfG9fmrEH4FUquC9kS3iNEgvQ7L\nHu7DPU/Ramd+rj/JO6fQAjse0T7qlh2uPz5KhZBIOG0/qU+IX3ccrY3G2bwB\ni8L1mCxl0jWjLtSlJje0uV6sDwlMUF5/8ldCqkKO7qz3Uco+qNv0FunpLJFw\nU01NSzmbbGKrfcOQozpMesLwc1fB/ycIo5IQCZySN35PXbszbf4+bWg55EZt\n9KGb92dITj2ANHoG1AHp206rgcXhPdDXJbMiFB55hUKiRPuj8Wy0WHMK9Zw9\n/x0jkGuXsO9EDf0nxzgoqEzaC1BEGOBEjNOnXGtc+SHf4l4+kTuIttZu6Pwg\nV96TFeXxF0dz1thkj7cb9DElJrnrynyrNUsZTj5KNrGB4LVuzfWhSshO1V7v\nw0GTwYpFu2+t/MgCh8SXjq1WJHlj/gbC+rT+4ghqQhwl7aDaYowfd4Ixsp2z\nR1VkzDoFWGyyCQXJapiP70aDf3SPiWtlfZjTV/J2Jphm+sXhyT0Fq53Irj7I\nS1TfoUEJBws5hApmrGqC9Cj641Rqbt+Z73E2Lkkk6vzrADtvfI4pKnmgZWWs\ntRG9\r\n=gKk3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQBiiNrwVsZHDLMtsCnHFGcGBPCxYucifYgvc9oBsdvAiEA9zCqpkBGt9poRNaRmywnuonv1TMAW0CKuWwzdpopxI4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.36_1572629880634_0.46348022458308935"},"_hasShrinkwrap":false},"5.3.0-alpha.37":{"name":"@storybook/addon-info","version":"5.3.0-alpha.37","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.37","@storybook/client-logger":"5.3.0-alpha.37","@storybook/components":"5.3.0-alpha.37","@storybook/theming":"5.3.0-alpha.37","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fb19c3337d60c58e12736cd25e781fb2ad724576","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.37","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-jjwu3aTaPwLk7x6kUioFKl9LCdFVEi8nmhIUC90wOVkdMj4yUPaFdMsm4YmsUNpfWWAvKLptKiYVCJfsRkiM3w==","shasum":"8f439d37215404fe8e071d4b867b3e6690f475fd","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.37.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvOj6CRA9TVsSAnZWagAAUuoQAI0fdpYOhDfBMeSj3vyf\nKbY9C/hKYnnD18ZyhuED8+iUsoFJ9dbkg0FksyAhsBXfpmleJo7V6oMR9jzQ\ncJtUm9aNYNbqzCAJN6CdA0itIWneHAFn8jy/BB01nnJLKFAszo7aJ+YvijBS\nUp8ulPp18Br2AndKcDd3qsUjqzeXlGhUkLbIEtaf5mnBi+a5x+V/4QZ4IkvT\nbq9ivpvmRiEh7X81so8efyzWF5eXISREl1kBNl0ZKgiRPED1eAWw6NPqD02n\n80yfnhGJYCA0v1/bWp2GqqcM0vyBCfIUeDTX5tqcAAYK23s96iT+7sOIN6JC\nvOFlIPDVFAeXnleXZXkLmOTsY4PLSvrlZhxdmswh8vfoWabHoOFmNkl/A3s3\npXlQn95gZGxLlZoQ/GwMUzXlhS6KU5S4MmCqmZqa4G+Ebi4duaPxrA2so3tl\nlE83JHWuvD8qTI/xFOizuIxyykvaSfHZVxe3zqlnfnVYjatlNZqEOWumUrwz\ndnWSx2xJdBp/QfYcuAZT5eRA/Jv2/q6+cF9e6uuEecRENj3wRq1W29waWT9d\nC24tue5izJ2BxVGYP1bzCvBUdMwFDO4XMKsJhEisR0UYigCE9zP75CiR3T+V\n1m7tlf2UZ/gjOgiWH7A/4DjatZ387Wk9L98UjT5C3rfJLVi6QEnaY9cpn4BB\nYODm\r\n=TlPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcedIfGyUWF2Iii58nmDo1OlbSaFg0SReej8gSCSxSXwIgDFaD0rLKgOvMas49butCEN+1G4CgDwp3euIQy+31obk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.37_1572661497546_0.6657352411669579"},"_hasShrinkwrap":false},"5.3.0-alpha.38":{"name":"@storybook/addon-info","version":"5.3.0-alpha.38","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.38","@storybook/client-logger":"5.3.0-alpha.38","@storybook/components":"5.3.0-alpha.38","@storybook/theming":"5.3.0-alpha.38","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"528c6617d9ee28a6457854a1175a26b29476be73","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.38","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-FCCNW9eRhh7mdLVh1AmHPB9rJrm4WVWo8wUTkNIv9qyELRgCHVzMvJIG8HxNUJ05rx+IQzEfzZ2tiLNdw+TOBQ==","shasum":"b9610ed36e8afc04827ec991f5f4955163ba305e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.38.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvpHiCRA9TVsSAnZWagAA5ugP/1M3rKhINVqNXIKFaD2F\nu4Nn6jzgvs1y/Ef6j8P8Fbal2ZQ1jYKluUagionZnQDh7qqKbIHQ0jy7sEI7\nikz+Pp/2v8aso93yPnOBoDQCfCwn4hlyiJkdva5FBcUq+0HN/6rxJS2UtPba\n2mfQPDXliu9MdnqSi+knGgnq8JNa86ifM0+iSw6CdZJKCCd86zl5ryrCHXRV\nuqShAOdq3KnD7SxHWQRUBIZwWJBZW59u4c1Gw4VH+MDtB4O2F4dBTJCYoL92\ny6/58jNLH60oUw3HjhyLRHkyBa6H+SqSHGoqx3f+axlWP2csi7gTAMVdjKhh\n+A2/+r1XTlKw9LqlzJqdjfH9HX0/82JjL5Y+u7bm89+SgPCVsaSvjKfhxOsk\n9/tueijYqRI0LVrADcWFaL1xx7kgGj46B/M7jvLheDUterHQAYtaMjMx/16+\nH6N/Dvfqeuf4LS+LHM5VRgkxZOCiPAMbmj6kmxuFeAvmmpcP5Gbiz9DWknCD\nrwupdq1S1WRzxBwi2VGVjtGTdT+FyuS2k1zItuK8WXAZUKM/aQkpXXQQaaJx\nPSOdtTkBXoQDLWTfQLjc7CQUxjhbcWKWGsqDzSrwES+wji646V6GzRNEE+Am\n0xXumZt7JFgXwAn6y/+tCmjSLEHLYjpzVPk78b0T9Si9313mmsYH+I0FdIeb\nmA91\r\n=DCYj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4kwMG9q9+zWKgRUbAgUti73rO31KXwPBuHEG1kk3YVgIgE7UZIcZ/OR+OrBYcSce/DjmZeP0JyZ/ivPOnnjaa56Q="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.38_1572770273969_0.4917885712441601"},"_hasShrinkwrap":false},"5.3.0-alpha.39":{"name":"@storybook/addon-info","version":"5.3.0-alpha.39","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.39","@storybook/client-logger":"5.3.0-alpha.39","@storybook/components":"5.3.0-alpha.39","@storybook/theming":"5.3.0-alpha.39","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8f09ccc687bd5a026ae8b4d3563f4718bf945c65","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.39","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-W8HGdt0tcgd2/+nqpC04YW7UHZp50yKO6zaKOR5msihUphMZDIvlGPKIp9CXLXzG2hcCQR87O9MbJbZ/9JR7Ig==","shasum":"cf65d487aa6c2d1d24d9fd833aae94feddd35ee1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.39.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwXzhCRA9TVsSAnZWagAACRMQAJmAMy7+MliMYOROA0AG\n2DzdG8iVQ9Zq11ODB9jUKqC8lYZEDVptPtvIVDmVdc8BDUfzZ/PRKvqH94Ou\n7L8e4pBfdhKwMCJSrb5HWyF/JT/wgFDI06YBabFU46/pLV8eZRTlraodvg49\nUKK/3smnUOpRtsKYi8/j3eKn99Dn8D/ZJwp+9YoG/jcOGpZFELvBH1CwJsWu\nWPpK3O8F2R3eX/dZAmL72Jp6EBS+HHLbBfx8vI/gwqBnQDZB5yG7tKMHiTCb\n2Uk0vZqAKHMpW8rNpmjd7lbmYGex0U01BprJ1S4NF6ePHJkWHUgjlw/h+BQk\nv+XgmHXemSnUQ7wmU8BCQswJsxLHjwbKVvMZWpPbie/qLX3lJpm2soqqQpDV\niOa2fOEBGhBG/X6/dTJT6iMl9zEu4fm9am+j6w5F1etBDu2uujCMDzx78Ki8\nlpOMniHjF02nPfmXqRYk5sztUCb+vVnkABjUJ0tQlZipODPL+wz635a1IB6q\nnY17+Y6BhbActrs5WP+aRDPJTGPpENUPKIrj0/iPyq3fDybp+JvaKl1I7yWX\nBRp5EIULQ+1wqiFW87h5Y8Iyy2N9JxiehORX7NG4tSdCvPXBqDZsDWw/GQMr\no/kAx2j7efNSaifX4nmjE46r/E1hY2sv3Vf+Ikd8eJrMdIM9unZgx6sojUug\nAy73\r\n=rphr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJL8eeAq1q2RizM/4FeoqcwrWhJt4hTmi0pBBm+DQcZgIhALrnMA5m3RcYnOTS6K80cCx080JEwLclGFqFFGdk4od3"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.39_1572961504671_0.6571500835402346"},"_hasShrinkwrap":false},"5.3.0-alpha.40":{"name":"@storybook/addon-info","version":"5.3.0-alpha.40","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.40","@storybook/client-logger":"5.3.0-alpha.40","@storybook/components":"5.3.0-alpha.40","@storybook/theming":"5.3.0-alpha.40","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"8741f83b3f6a8e31fb5480f9fe942812d5bc4e00","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.40","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-MbGOrIgFDi871I2jioOv9TerYR06MHpqefemSn87DSat+xXrSvLd0cgRtvT0Tep49qBAaiXZw6Zm86G7NnvslA==","shasum":"db1dc631b649c67c70f5857ee218e63c9284c42a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.40.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwjauCRA9TVsSAnZWagAAPsAP/Re39k6BzewQrKBNayys\n7bsP6KMeubXlAmOew6cjxcIakCSefeouaqbtp3MMeAGsYwlqzs37IL5TNGcb\neeTYREN+QeLmDp8KldQ1pYi5L168iVMWoqBHoSb+dwrHY+XzlK6Lf2l3hQW0\n/nZvBcR2NevpxtzF+/EXVOzE8iPdLEMNjj3BywheyxHWOPmtqYDaQcd6NR6/\nkVvw2lzd7YRC5/KMgrn14URG4ZAFNDAf5f8NnStowWsqZoZCtNVJ5wHLOMFq\niNdHgEcz/00duAEv97gFosyDGVK1LcruIpzeLqLSODBDzEnkOC2vspmDgvYP\nKmA4+xO4cEsfM2KPzHwKZwvfp+b0W5Ff0FnQiaBDQ4ThE43omMV8Ri7sLer0\ntxFaJDtJxlU+KypO1E9ngrLNhFjBq8tYOg517l/VjSPt+fSgzmUeIB6iLNor\nm2/poikwibg1rXbPDgQYtCzjdI8mhbjSYBwtmH5S9+Cg6EuYlEHk3ED5I0a6\ndNXzBWKRnSX8TjN3zRqCD4+80SWhMGFjMMx2Kd12xKS99shaWxdGy7V9KbNQ\na9YDKnCdhRKzkkbixYjYL2UEj/TPVkQ+1PeWt1hRPz5VK1zeXKJSVtHcCQbZ\n6TKewPFX0PxTRxSNG0dRetoNKYUxFSp5XDXYH7UkYlPt991HJl1qIYHF85ci\ndOlC\r\n=Iw9/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJ4zZ/Pp+HjD1v3SaHDrYw87tg9VwSUq55w7oqPmgEKAiBq/FyGbeX6I28eiiLV7KFCPBXBbTepSVmW0FXS2zr18g=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.40_1573009069786_0.4232480945177324"},"_hasShrinkwrap":false},"5.3.0-alpha.41":{"name":"@storybook/addon-info","version":"5.3.0-alpha.41","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","jsnext:main":"src/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.41","@storybook/client-logger":"5.3.0-alpha.41","@storybook/components":"5.3.0-alpha.41","@storybook/theming":"5.3.0-alpha.41","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a46bd1bd89a1e4df9b0eb5f48268742c785e7e8f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.41","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-s2UgpmfUmKlmRcCkTYGwfRswzPvoWyWRmmG7YvuRw2Tkd2K+vKSvNaMFUIUuHyCZ8AZkpHTnZZjyno99VARqiA==","shasum":"5f62db284f5383db5b78db1934a4c81364e5a121","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.41.tgz","fileCount":38,"unpackedSize":230536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdw4zICRA9TVsSAnZWagAA71wP/0aYHfLyKeJZ+wmm61U8\nviAKHPnuXdb8CzlfmWVqzTi/WzTonsOQtAWceQUrFXYu7jUBJWHTbC+r4u6O\nuw5thp9YfRYshoQE5Oz0sQCuilvz0EKRB49VjTx65U3I7sm2awL9zOVNKHKW\nV9WyZ/pFcsky5dNYgxH+8HeQuxNV9kPybNUhX5VpKVDBMoFDdjLEXYkL76UX\nzsAh0JnSWIMLu1ILh6QouhE6EKE2YsM8+jkZuZ8bH7qax60m6etxhUHkwQ4r\n5L93s+7RRFbVv/b7v+EPn3dzxsG7YSmwsZ81VC+ItmHewBvMLUrXqrxQsxD5\nP7PFRM6cBGPCNINi1of0l8hVktnGVs0tmIUpoujxpGt6oHWfGgy6BAaJNfao\nsY6iuxG8EoTJZqnh7HLxwzQphAWzEYLriA7a48dH5MkCByu9jhlJZPJwH0JN\ncqK82qeooufAnm/mqgdor2RRQoCz7rDBCNg5H0MMzxRUz2Ee6TTrKoAzZluH\n3H8CsUUBIOp8yWR8nTHqHa/HgXf7gh/5oddMCoftdQPakIG1Kli47sOPdfHP\nI4HWtEXcAySTzecnH7I0xvp5gzinO8HPN6ILudOJcOZhyBo1h84A6ZOYNmPB\nvu3ng+IEY6CfoJFZgQZ6o7Ynr3WPWEnB9LGox63IQVCJA54OiJreAPx6JvUZ\nmzx0\r\n=0058\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtdDNbyqKIB3h8uCDJOWpkQODhjPCuq79rF8l8zbhqMwIgGqzpluGi8IJXz0VJmWUG7e++29Uqq/jr6agR1jYrtPo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.41_1573096648089_0.09116263337046382"},"_hasShrinkwrap":false},"5.3.0-alpha.42":{"name":"@storybook/addon-info","version":"5.3.0-alpha.42","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.42","@storybook/client-logger":"5.3.0-alpha.42","@storybook/components":"5.3.0-alpha.42","@storybook/theming":"5.3.0-alpha.42","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5242f4f190d2dcc5d4dea6186449ec1547161ea6","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.42","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-PECnwrJmryz2plODv48cez3DwbJoViwDdbSV4+oiu7F1a3x41assMDJp6iZJG4hlf+1K3ZDU+Fxg2pZVgCCV9A==","shasum":"a403209dad8988d273e9ada5082ae372229b5173","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.42.tgz","fileCount":38,"unpackedSize":230510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxnMNCRA9TVsSAnZWagAABiMP/A3gU2EQqUgZ8XbdswK8\nk97sEFOnbY5VsQQQGc3RpbQ6Vxp77nnzSLl/5PmAfkqVV4HHAC5Wrm8cOAz5\nKqwYXaX0Sv/3ooDJBDk86CLPg6VRodfpbeakLUxyyWO/C+suQT+M5qiB2DkI\nt1n/qGb1pXXQUGLIoRVlTw9jlzC979dWOylaZLghhWD69zmPfbE6RGe/nO6I\nMr4PJsL01kVCimUWyQZl3kyZBh1AtDmrmSrGYa+vVQJWg2cekgDfBrDSMzCy\nIsWfpibPep3JfPUSqD8pW3VBHGOlhFNVKBq0rLu/wdGZ5lF5EHO1abFad/Mv\noEonA+oQt3YG7+SZU4BSG/gIMv1RdqMyHILSNz1qsd5/GuI8KTXSWNtiKkv+\nMvyHo3O7Eg1U+zEuQcGveLVqbxCwE5/RfUY0ms2lygR7Oyg1Zp2SDxZHYDyD\nN7Go5ddzegEkDKkkNEw3WdOKw2+bAc+SlCy14rJSzcx6TrimYKjRq44CboI0\nk4QhNnMgVUWF+DMbYHeWNzoVoxknbEuKrVE6Cq6p6fHILTQdMEIyqzzbbBqM\nIFQ/tB2U4Ywnga0wQv3E0Tj867UUp2i+QfXJSVYLn6dm/BJ2eH6z7WeX7WIx\nWusuKjw/j4SHdCeN3/IVl6yoF97bM83JQlB1DTBI9GSB96XuLLChNeCrzhAm\ndKhL\r\n=sqPt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwz1K/zphDsHvLEZCjli4HGPytTqWDSkwNAzm4vt4IEQIhAIzMuJ/ItOwAQcbiNMLptxJfv9AXAXsgI3Ajd3kODw3w"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.42_1573286668582_0.7897378614655253"},"_hasShrinkwrap":false},"5.2.6":{"name":"@storybook/addon-info","version":"5.2.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.6","@storybook/client-logger":"5.2.6","@storybook/components":"5.2.6","@storybook/theming":"5.2.6","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ec8ef5c144e73ce8f762df03da0ac6c2375c223b","_id":"@storybook/addon-info@5.2.6","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-2ct91Zf14Be5HZ77szPpJK4Fvy4D/haQtziCfv9UKZXaBm7Rz9vKPuM3uCcfMywh1eMunhhluhJ/3bxmttHXAw==","shasum":"25c8405ded9e20b1bf3b607d235601b087a73a5f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.6.tgz","fileCount":38,"unpackedSize":268372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxovaCRA9TVsSAnZWagAAKzQP/1I6Y2sD3AQLwJ6mHZOl\nvrwW3brrwIljy3PCBEUxcf5mMpIQW0Ifl9wZbMwehaNaTifpBYArTWmlTrx6\nIiybJcraz2iSWCLsLJHlr7sd+IeZQ1TgsgwvDocfZpydP1LUWWr8/uImspXq\nNS2tFgGvPCtcED46VLZ3wJeFwNoANzeXBBHKuo225ENhnUCeAI33XHk24sAM\ncdCKHKgxBMXrbqS3HVjFEJHzi5/kVVNbCTnmNpBHHOoy8PApfdDO0etiqgkO\nRElxoMhKc70KSQVeJ+nryjwOhaC4p+sumyx19t18UbVr4jXzbo5Y/Se1tBGS\nfinSya7cHYoHRBv4y5ndd8Qs37ohTGQUZVgzdBP3GlruHsjPmYOi9ha4Z45R\nYO34CvnaN7hFhN/oTCL+Mj8ylAsxajGkqiDJrv5od1bgaqWA9qMUmH9p1lNL\n5ssESRb/nXcHuRjjW/N9wXv5iUm1j1H7Kz3HLZ0fIhWahVUk2ggqALLFoWCS\novBYmJESvgZ0HWpuSKEQncg5AavhSiop/01Kyhpzj7PNu7pgze34WKr3TEdk\nzob64E/cwvcmnzQ7Fus4JcTKs6/j2JRV3walhXgFDO2k6NL3LPk7xLZh197U\nILVbOiHyh7BoGY/B/KtiQp5H/ObI7Z7lh4kaYdq92/Jk+N+NvrfQ4en5RKjC\nLQWi\r\n=ow2B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjoWqkPcAnAS99bAq4sSDp3LTK2Ng3khL35DpC+ydIFAiA59sHhGj44DlSvygO4r+gVVoXhRfw6r7flElHzFPfbqQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.6_1573293018231_0.48970714880108646"},"_hasShrinkwrap":false},"5.3.0-alpha.43":{"name":"@storybook/addon-info","version":"5.3.0-alpha.43","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.43","@storybook/client-logger":"5.3.0-alpha.43","@storybook/components":"5.3.0-alpha.43","@storybook/theming":"5.3.0-alpha.43","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c5aadcc5360831a6635ab5cbe8ec1b3f06670ffd","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.43","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-kaO1JATn4H5qOHoJn03S3J0UopvRNpn+Dp5nUcozCVwSSfzp4pcRKiCFRGqGZAReGhA0lcJ9RCJSjrLPprcAeQ==","shasum":"0f3b3c789866946900d5aba2580f6e1c67049cb1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.43.tgz","fileCount":38,"unpackedSize":230510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYGUCRA9TVsSAnZWagAAnfYP/jRzqw9efj0djnome62Z\nOzS82CS4+b2UK4eSvy1YwtE/+7RNpU+RQFkmrLM3fkkUGJXdfl0s6ibpAN13\nDKZ70xm48BC1iE04cGhui8BYMxA455lS32oOj5N2JV7xJGEmvOQVpcfzzvOx\nNmMK+Y3j50A2uSCbg/OO+hAnV0ni5wOrp2tARqf3hKyNxivXj2XhIyv834IO\n6jgE/4aBv0vJS5lheLcdaD3Ka+NWhkUOt0BkGEOHy5Y8umTYmQijK1e9dkTg\nfgQKHiFIDEht7vZsrJIpGp2sbUlI/eA7dxtjO8cMHdBdfA7A96skV+bquDHi\n4P/lI5ihBRhItQGWbNHKBcZJek/zJmcYUzzQIeSN+mh+zn/3xFb3j2OuWXn0\nQP4jp1GUvi+QP1HrWWgz+SFOJAqolK0VF/2AUilFNVbIzpjLObDb32L9dnJK\neBvALZMIInMBzNscJ9Iz8U5uCOSqPXkT9ru3gAIrM9CvSFLs64Dof++aPnmQ\nKNRi0TY5vZdKSCCCfYYV44T0eNsYi0inBbXQl/Ky49w8TrZzt4EnmngNLEmB\nLgS5kxa+f0qI50f4MOikzo3FOoA+J9UJ7IW8/pffW4i++RM2HlvBQV0tk/T0\nXnB8uU0zD3FHXT67S+PfcqNb2kgiqHx5IJXK8YunNCxbYlz9ars9vpDaEQvH\nJXlH\r\n=zhN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmn+nPSyFoFqaK1kWSArfhV3YGchXKUVX/o7NzIYORuAiEA3ptEBF33Ez7lWNaweZbE4HcNXZJVx5goS9J35CiDKd8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.43_1573486996427_0.8894548020844213"},"_hasShrinkwrap":false},"5.3.0-alpha.44":{"name":"@storybook/addon-info","version":"5.3.0-alpha.44","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.44","@storybook/client-logger":"5.3.0-alpha.44","@storybook/components":"5.3.0-alpha.44","@storybook/theming":"5.3.0-alpha.44","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"be73c10751f6d6513b857ab6049b18249e1d158a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.44","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-KcUAWtYH8FEAUm4VRH+IWH+lbZ5DN6rWV77pG0OJZ3OuR6afae1mkQNLJA2rxYXJSFhK3QFyk9DG29L3//zcOg==","shasum":"565c2a4d4b970cb1168504b64e188abe9df6e66b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.44.tgz","fileCount":38,"unpackedSize":230510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy1LYCRA9TVsSAnZWagAAa0cP/2T+seyIlYi88b6eXPNj\nyPEiEIEbTHqHGEnzYpifGMJVbc0Yx0hPG6Vok0nn31s3TLzRIV/s4FgME5AD\nqakitwu1LUT2/XHI2N0d15XwnlEJ113QGrLXw5CtJbFtArErtvHD8uSUhfS1\nqJewXQe3FJEGgVUr7YUO07XrvuwTNoNnKgmUrrIkU+9GajV8q+y4vMKHkTpj\nAIsR6Rbxhz2rk1g8M+tdo1wBRYuyUwi8sbflckSqIKXMasdC+r7imY8piaER\nJT4cvVJXs+xYZNz0AXlpHyZhAcNFS4ckdh4yRmd5IOqXbUMC81IkQiJOwryu\nns+7sJA8a4citOlKz3bhJadrSi6J6SOlggJD5bvYLUMUfALCEVtRRkG88YbS\n+sk54kOdcBFWksS7T+TS8zleC7MX4B/pNYer0d+X4ULKub9q+K3ZxzEEqnBt\nGp9LCXhdXGcIWoL7xZaaAYpP9ImVSaQx6qVDuwjWh2m9A570hZK+SJeiwGDB\nMzAHAOV7QY6XS2c92GPFRnGsa2zRE3J0KGlQ7VwVeSiP5TC0uJcFkZaeplhD\nY8NakTj72RmNE4FEjIRnelhgv+gdr2cLw1NxDf9svv34E12tMlBkjnwytQpd\nRwVKdz/kBVYynhVinZD89UAZrKmWBRlVUy6aIMSjDtQrjwy4Ttnke1gpnuxF\nBXZN\r\n=oj4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvG80qigR4zUEMQGGNLGDtZGNO/XCjOpVS/gh8gpmJnAiEA9ohMIgS4EAdkhfXGZEauMrByWRFRv1PeOIk0vaZOkbU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.44_1573606104319_0.6626764230898254"},"_hasShrinkwrap":false},"5.3.0-alpha.45":{"name":"@storybook/addon-info","version":"5.3.0-alpha.45","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.45","@storybook/client-logger":"5.3.0-alpha.45","@storybook/components":"5.3.0-alpha.45","@storybook/theming":"5.3.0-alpha.45","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"3e45911bea0aa2fbf8cbbaee5d948376ff793678","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.45","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-r2eo1pNVyygFOTALaf1hhkw5HkxhCJa9FjEC97vvfO9ZRKAPStj9PXi+reKXzncUltXu70ci5/VuANNbDj5WjQ==","shasum":"d8d1079e18c5a202f673d65bda3de443f12a3ae4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.45.tgz","fileCount":38,"unpackedSize":230510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzR/QCRA9TVsSAnZWagAAg/QP/3/Jil9lX68zKos8uDX5\nB4kjDTTb8z5RGtQ1mNskRQzKDBuxa5apdpjwUvzyiwTNLHJsBvuJGZeXNeSP\ndRfTrXubqqomh8eNx8WLI1vCE4i5IahrfjkZmiSVijSATwZ4gV0xQr6SDDYT\nDOGpQoSEgTSuzfFcsDZ4CAM9x4lyU7fHG0mkIP0PQ4aIXWcUqAWMm/suf2DZ\nQJ0o84HqDGKfjSrz9SxKjh7Ab8Q4q7pbLAOiUhvAg106AHFLKxNTpWucjoYp\nZUyTLcD+BGe6MX8KP+701r1++IDZKUTb6e7307FIDOk65xqNqYb5SeBKmdgt\n//aJvpgoXT7NTviUlwvYsEuzpBg0hMR7gmtHdhvDvtSIVQjdE8alaeH+4b49\nCVwZP8CPnJ0RyJJLoi7+Dm6scS3q/4aKrOHJT+cZmAQo7n4jyzlaJFKsY0yS\nVSQwBP90WwjvyaPOio+Wn7ZFE4GGYpNWg+YkO2+8rH1Z5R1twSDdHFnzWmes\nOjVAPlhaqHoiol1VA1zX3EUNB0ukSIPmt3FpfuHfX+HXLoXTH+n/WvQ3yPUR\nslSlLrnJvaCaj/EJitNV+5Z/Sqt7nVhed4mDB7IdGI6LtRrODhZiDNS+xNGG\nvgbV565okh9LTW4KgoE1cieDCzDg3eql2QjqGbbQApt+PGGyV+CHAIqzwIX+\nvU0z\r\n=41wI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUpzmBpMZcvWC/Y652fjUqLbnHemoxDvlBsE3TDQ8xbAiAo04ekz+uFIVd6JsNcJ14pip+YJTHKnGHiYkZfJE33LQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.45_1573724112032_0.048597213148147134"},"_hasShrinkwrap":false},"5.3.0-alpha.46":{"name":"@storybook/addon-info","version":"5.3.0-alpha.46","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.46","@storybook/client-logger":"5.3.0-alpha.46","@storybook/components":"5.3.0-alpha.46","@storybook/theming":"5.3.0-alpha.46","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"431322bbd9c7232984626283208ae890eeb1b8ec","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.46","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-n4f4xekw8uUquWBWroVQKhti+sovaFC1l4mMbehSkraDROHqFor/lMDqHrQiyzvNaJ2YvxQxm4X7hcG+5cHV1g==","shasum":"f0ed0989d26daeda518483ed1848d273073a9c36","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.46.tgz","fileCount":38,"unpackedSize":230510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzx64CRA9TVsSAnZWagAAcBgP/3Q6CXJrQO7uaeXnwz9H\nF9SL4WYQ2cAqS1EoXb1hYQxmhPVU3TpExBMdrwpPNwkd5n3MX1rG+JTcuCrl\n0GSRBGQUxmtnBXVIkLwBdjlWdMUXgS85z47Wlbp4BOiQ3c9Cc1iuIu90XNsS\n8bG1b45AWxqZjDFs/cyHM13K/ykgbGgL24vHLmmcM5V6n/cQTIQULiON5c9g\n0hCe0IrYgnyX3BI0V/Iw9K3Am1M+tCZTCUHY/dmxE3x6q2lUX4RfFe8AR9bH\nApu6IXpTZXBzkRGbNjoxCfR+7Y9xtOZMPdVCpJ+7NIwXGNw5BZlINO+bpJIF\n98OoUbwEe0pvZ+4Aeb63VrNrNBizH0fxvTbJEZyM2+IuPo5Kf3Kg7mIP4zJq\nJmGbjUVFbGcRaz30fks9PGTySQsVAThZNX3sd7ScTjBRmMH4938GrAkdg01B\n2XfaAwRk9ZusevzwQF4/vfyUEu7CWE39kvprQSL8Or2R5qPvUNuwRw/rR/XY\n8C3LnXS2gi7GGhGF651QBig+aXASb/KZHGIaBRrCa/4u2f1chLeUN6HpxHD8\nODLjosW9t1XgxoWcR0bu+247j04NHLy3EWe2aAGDQWes54rsaIei0eGYkoSp\ndPIzjstB+aPVRQmztEThBGBB3GNBH7Xo3y379VMLb1n0dwqFDrfau+P1GrKP\nxASw\r\n=oKND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgiaRMaPyOM99ecGoF8z3CnOiVUUpsXl2lRCILathBnAiEAnsYJcPXu2qDKWNifEIksnSJXayCK8mfbxW4FEyBT9BM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.46_1573854903744_0.7188299816172081"},"_hasShrinkwrap":false},"5.3.0-alpha.47":{"name":"@storybook/addon-info","version":"5.3.0-alpha.47","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-alpha.47","@storybook/client-logger":"5.3.0-alpha.47","@storybook/components":"5.3.0-alpha.47","@storybook/theming":"5.3.0-alpha.47","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aa97d03bce1a21158383d13a2e80c8bc29be4109","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-alpha.47","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-hgNwx2V1ALP5Bf1KmrJH0wg3qWrTl1nmtYDnQ+d29oQlEeukOBGAG1Ma1/bzS+piwEgx3t2h+yBNAUSFztAnDA==","shasum":"2fb764bb2eca3e48774de8c5ce5bda3dee6b73df","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-alpha.47.tgz","fileCount":38,"unpackedSize":229022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdz/PHCRA9TVsSAnZWagAAomcP/0bHYAB+8qwEjQPgBXfD\nLq9DpdKnY0yU3akZmhwX+O18NYsNzmVfJ9wClE1qN2nY7eaBFaXioAcNa2mu\nvzEyhii7XQN/xYkH7uW54jD62I1OpNmk7hcYgtIggyaTPVhtyX4ZmOgo9jkD\nr440ieeZt2yKfCx4QwOg55Yix3+O+noSgLFW4wpr9Dy9n1cqJiZuOECPk/XC\nwzjHPZ/Aqu7EhItInwsqaiWmuMSvs4a2ULmhlUgJALX9PZ+XO8TPJx1nGcD2\nIkdaEj+/JxPlWY/OlDhqDLfjAQoQTG5WwHkwa5AYUjC57aW6OqtDijgEPWJw\n5f/Vnzh/zEHkW62JT0Z8ysT+4oVqqmzCmMdhRfrtjTcfrpcyAyBawuU/76SN\nfzmeyy5G3C05YDLlASo5Xbip/jlS928jIIp1XV2j+M4k4xpHXnwm3jUOOyaq\nxzWPvyvAvjfmSr9EwKXo81+eWlTZ3xpWK2OdzE0aDirNOjW9dTjjltgLlYCc\nDLRLuTPU8xRgr/LFdj+QLmmYODlQVwcagSTHSXZozNaGMHp2QwshrC0gHeo2\nfjFe1CykP+QPWYgi6sL4FI+/VC6Vgy8t+HR2t9FEp/KDL4s0OrrMCb5SI1FD\nIb/2fTgo4uD+vyyq/aisF4vPpCME5wTj6BLjCLH/QPQh/1PDdiZhD4EYYsE9\n4j8y\r\n=gFOD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDog2mHLdO6uTKDzN8MEffAZVv4UIE8iBWUXYgMkbATMAiBhEpj0n+rd2KSg8T61e8MK4YPEiJxF7Eur3XmyVye9/g=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-alpha.47_1573909446997_0.6599395736329008"},"_hasShrinkwrap":false},"5.3.0-beta.0":{"name":"@storybook/addon-info","version":"5.3.0-beta.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.0","@storybook/client-logger":"5.3.0-beta.0","@storybook/components":"5.3.0-beta.0","@storybook/theming":"5.3.0-beta.0","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f57888b0e3c3d457bc25407af0b885fe1012aed5","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-Hvvm4pXt3Ortwwl6CiQe4Jka8qMktqBbB1I51uQWI2Ov+nQoXHFxogoIubFskp/D8DMV/3bOdMQSnUwgd2piPw==","shasum":"0fef2922d7fdc6d8b8a6663cad4afa8b5a17e4ae","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.0.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0BapCRA9TVsSAnZWagAAVgsP/jd/EkZjz4zgaaRjCHl1\n0PazQGeUUnZWdU6/uOnM7e5RXDSYiBhyLOTS91b04Mc8NqrD1WCLeXnlhHbg\nozTzpIbq8roWTUO9xHqazTA26+c909rJDhq1ePHD2tZUGwRu1wQTFbBx0oHF\nEArOTNFS5038VEqiLuhrAFPt3T19Yo+McM3eYyoYHTDSXJ/I/cPt2oJHNCLL\nUNQ08lTwZ6N+70iVfX/6I4+ogF8+xGUNdqxvy31QoBWcOWu3SSl8wX5B4hNu\nrhWREM1BQJmf+n9L3k45EWe97bvDOTN16hCFjvAl7JV+btCm511QSQBQatwG\nAunbIuPIgm5UMDNwEGzYoW9XDvsSVvV1+IyoGeSCVD+0FSmNbRXDkSKIJMS1\nWSCOiW5w7e8Vn3jK+yx3hy3WkiZJbnyXUPjEjdtgdi8yFefON31fiueHwbN4\n4ETlKtspaPBPiW8tcyvRroKuge6w+UEjdRLpQGIkeMKDGXRbnX1PPT1YLAUG\n4/VYPggCTNq78Qc+OCq/NFDPt9lkHDli18klJHyTsgblSsa9tOClkGGKh+82\nTD+2Ywts16eYZrkrEiP5crSzkrQoJAxhDSsd9cfHa7H6iseEcvjhgTqI2BOf\nHdSnbEAer1myku1f6WMvk5Q9N5PYFYEedw+cZEiNByTL6G70ECVxtq6BAFhp\nnfmC\r\n=Q4m8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBwMyZ/zpNACmX5GFlFoxt3pK02s7HCqJwuDlXdn3HpAiBP1JudTzOGi3xfZd6hxRmt8dwpDO09zi+iNYNpYpOokg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.0_1573918376795_0.6738974247534115"},"_hasShrinkwrap":false},"5.3.0-beta.1":{"name":"@storybook/addon-info","version":"5.3.0-beta.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.1","@storybook/client-logger":"5.3.0-beta.1","@storybook/components":"5.3.0-beta.1","@storybook/theming":"5.3.0-beta.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"93002b5e79b34da66b10c7e8b6e0f278661a039a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.1","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-4iCXuq5TzNuHUN7yBHLgySUde1bn1EEFUiZcotEfkhR9zrY6ZwUZnIIwsYli7ojekPjsiJJtInBov4I0l8bwKw==","shasum":"f94de43177688319ef5c735f3d299e73f8f9f049","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.1.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0qx9CRA9TVsSAnZWagAAP/AP/RZfK7/AF8aKAFBRcVZE\ndab1ScmX8U5LYe0jl2gnn40Oyba13odttPFxn56ZWWg0+MOFPZtwjSyBC623\n6SsEK4hu28sQhB9i066phe56M88oSsSAnbHdavmtVUPF1e8GgzFYw/vetSkV\n8EsUXX1Zm7SDz6oJVsKEOUcUX2Za+Nyy9/X6Oy/54/FHMRcFcCXvwZWwCntj\nYZgxQ+tapmdac8NvjqMJqY4aKGYFwuv//haAAVOKx055FEbUHfH+6euMyohl\nGLSjYvqII5CEVjYcx1CCbesbPlQK+P6ZeCS+wUy0F1qCyss/viF+Vx2Y4g49\nYJ65iuHn7Dh8woar0ldTAfNKxp33qmlb2SrtE5iOH9zaj/Y3hcwwqz3n8DrH\nmWKEAVDd02fEb8ufVuBM2le3FI3lRJ3EfNKySsaneN57KDPE0ZoZTw91ILOP\nXrgaIYo3zS5bVF/274h/nIZQld9jikvq6ctDWXXLOaRGFkU7gg15LAGgebqZ\nB2nAasG2Id6mnK/yVkmU3D4+lJuQymIMMMVsZX8wAk5GCf0cVXwhnM8k6cEt\nHgxcELzwpKJR2HcEhZB2Q8Bhgx3SaSeCxw5lv0NyfTH+Q8vkXbLPOOQJas+1\nVAR3aguczuT/ec9zen1/J+GYVCaSM8Cg00hAvMzfd3LgVFWxfTJyzBao0B1Z\nCiYz\r\n=hY2W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFvdMo1orUYq0D0sAgD36jqka8v1H8Bd0q9Ch3qM2KjAiEAzpEntA+90ZMhuNr0ihMW8ktA4JHmeOtZiRBGt73L3tY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.1_1574087805181_0.6605471695955463"},"_hasShrinkwrap":false},"5.3.0-beta.2":{"name":"@storybook/addon-info","version":"5.3.0-beta.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.2","@storybook/client-logger":"5.3.0-beta.2","@storybook/components":"5.3.0-beta.2","@storybook/theming":"5.3.0-beta.2","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"27dbfef1d83b0ddfa3d1e9510212ac5a2b82e25f","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.2","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-SACuS6y9vvn1uH+PVlTgPqfc5lvx4OndUlcxnF0cInpda2V+2UIZi1hwCrjT+qlmD4feNn25haeJ3lzdGcscHA==","shasum":"982a8e9f47063cad85683a1b289319fe11502c4f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.2.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd08O0CRA9TVsSAnZWagAAwR8P/2uj73IQYzjr9w1TIbeT\na1Y5fcKcpYR0CswTReze34mo1wKc3Y/wOkYwWiBKSs+82jUD/bCzwUfLOWam\nhxtDAyYDxZw0VKk7aoPhCEduHNDpDhy/CR40jMULJdoblpT0VPc284AUrE09\nZnwjTEl9GCgieCqcGjr8hOmsxYQoBERHAhXc8ZOe4o05V96sRf5m11fZDXXG\na5YXlQSQL+IaVcLNZvqG6rIXkReVF+ON0ZTPCKXIgFvA9r+lvkjbJFSYqyAZ\nd4UGQNhAHuOy7rORnHUg+FZCwzuV7vPdNk94bNouIr8MYP9CqDeMaiVL2Mr6\nSd/aBqqEGefRR4QIrqMJ+zZMQm722DWR/aCpztsxWfamXaeXRtfsYcLrS0wU\n2p3XCksVYyalIuCBG+Xu1vE4WpgW8NAy2O2SvmAUuw/AQqeaNWzOglZtq76t\nSinO9ZQENas5Zwg5qO8IP/Gk50+nz0ZbdTG0kUMIv1cL5eYM5iHwWWrqercj\nU3eaACcZohAPwHjG1jBJO2yPI0eZN6+0GNw1apgQ9rqDrqdjGb1YiAfBkgNg\no1HFBJcfTsVAmzbBy6DyBACaTv9iglehPbgIGP5LN6/f9kYFOaPQCtH9Fhjh\nfA+PwIQMW7bOSxiOGBrvi6srCezp+Tl+nn4OxjURcCwGQxJeABtsx/xszEet\nrfJx\r\n=JNPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbNMuONpfUWDE6WnIo5L0LZfjJ7wczKG39YCzZaW2GEAiEA6dpqERQhg1634S8CX/g6atBIyWCp66ETPzHMqqmv2LY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.2_1574159283991_0.7265358127820281"},"_hasShrinkwrap":false},"5.3.0-beta.3":{"name":"@storybook/addon-info","version":"5.3.0-beta.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.3","@storybook/client-logger":"5.3.0-beta.3","@storybook/components":"5.3.0-beta.3","@storybook/theming":"5.3.0-beta.3","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"6472a3735300cd43ed4e34c9d4316efc41f3f043","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.3","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-oGQrM8OQP2FbY+C6+UJ88s9MkHvjtBOx6g4Z1kxmsmnpVA2t5tTwcvt8aFz1csNAbPeflaQYQmlM9OU2MQ631Q==","shasum":"c08d383b361574b6a6f1eee765beb1009bd8141d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.3.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1jK5CRA9TVsSAnZWagAAVgIQAJzRfGxQpyh6/LS0OZir\n0eD+DVF/0hcs1faj1RouYM8KUsK5bALOuCWNnMzXzZr/Opf2P66o5CsiE9w1\n9DQG3wxIygmAnz8tCJmoFayWSeEWpgeN84DmykNlZdgynPzjzOnI2lFptwKG\n5oDRsqHmiGFodew4NVTo6bKcETGwXgV/wUKMXAupZjPrXrppT16L8+duitVf\nVo2OxHM7XZTYXaRFq8BohCqMFrh1x+UxJn0dMDiStlP9D9w5WNf0JbJprHTg\nazow7dMwziNFQoGDob+wwp+UdnGjkZ8QI7/wPx82WlParEY4wgv5LJIivq1B\n8pUcIfnfvC3hXScwuY6rYAGtGcDFMpuzVOUd9N3mQwFO9XELo/ysNcEmFE9+\nuGwaUpUOghCDvpB0pOge14wZ3yYYii+10Ej0zrecPWUs39bt+cN6a6VMvLQ3\nBc1zqtKNNnqOeNmSZij4JpItKVY/eOO17iATD0f2LxusmyXMvR4LfIqvhR3O\nBTRbrbT1K9/l/265kwKpb0ZJ20bg0B9RmFTO4baGjqpURPhZmPgyP5H8oLy6\nhAE7MfdfvUSnmmWVbD4SjLnUGHbpdmbpRBmfiWcBilvc2/PJm6BOjKpnasat\n4UNEddu+L14szf2fIpITuAZEsiGPrr8qNtiq+YR12/CvF66OeW1ZuvMyJ254\nRHcv\r\n=ZMO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERIzP5doshpnXFZ+juDE0opdMyDza9AjMzCaqduQR3qAiEAziNnQn2eZz9uuEOhrlemLP0/8GukCjs+zpgtC95dIRM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.3_1574318776512_0.6771401178398011"},"_hasShrinkwrap":false},"5.3.0-beta.6":{"name":"@storybook/addon-info","version":"5.3.0-beta.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.6","@storybook/client-logger":"5.3.0-beta.6","@storybook/components":"5.3.0-beta.6","@storybook/theming":"5.3.0-beta.6","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7256fe638b4f7a38b39552470189fef4604b834b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.6","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-r3SlT6nVFSPj2sBYeFVIQ4LtP1KPKtBnVW6YCmKQX2/j5qcEQurlg17OrGP+clxkv1AIUN9QPToFKBMMrMFg/w==","shasum":"da0da2a3746716968091506dedbaaa76f4db03b1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.6.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2kXkCRA9TVsSAnZWagAAq2wQAJcUMVPsY3vDDtIJ5VEf\nia/6GOoeXpwhkll6TVojsycVXqwgglTh5VCjeUKaI6EduKTHCZSoqeipNtro\n9/WZAPND4Gcm9jPAJO5sjvtdVoX/s2qKIjjyd0NpwxPnf6UWopAhtfAHyHvM\n6vjf0XAjm/UFFOCuFkJt2f1lPryoTXQGZTGTv3+JMUc59xPXZGRx6PV7X23k\nB+MeD9gyfZJnfHeB4rnaE4LNakKrM5uouCZQA5X1Ept+F8QAQnP/o33r1rym\n5wtIrFJNXD9IYA5JPBxVnbOxfqA4g+zHnkbDkY1Rm7MAGccx7PcGBkHL+BEH\nX2eArVv+IVyBEBfyVuXAH1xcOBc/096qqbsJDI3hGsDHfv0rjabHc13+pX/f\nXFQBNcyojMJCHdS6X/NrNLxrTzERAjubCL6VuYmk5ISSHxuZMwlbM52Fvjk/\nqfwSn0gh1DuqhltyEwKFPY5ozPd3FaESLyxNvR6mQfHELUAeRNbnGvfMlzu8\no3h06MPMbXXxG6hR7ayPYhzuZZQm5/KVLcvOu0nOqea8XVW14FsL7yG9SxoD\naqf85rulH/z52e4AszxM3T9I7mk58VfhYwJDBsnzVf6kL7om6YAUm6i2rjaT\nyVxb48Sdg/ay8NAJMWEtcJ+Jo5u5mhVZamvqFOvI+FjhkLoOqgsE95ybXhmU\nGfYZ\r\n=jCBl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOeyANUaQuWynzuuH+mkB5IXyHFNZw/nAmDPm/uB29gQIgaSbvE07toQHvzpr8E8edR7NG8pnDFRHJWhdGsOFLEGo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.6_1574585828454_0.4439627580158332"},"_hasShrinkwrap":false},"5.3.0-beta.8":{"name":"@storybook/addon-info","version":"5.3.0-beta.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.8","@storybook/client-logger":"5.3.0-beta.8","@storybook/components":"5.3.0-beta.8","@storybook/theming":"5.3.0-beta.8","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c6332f5a080dd32aac8da171e122ccbb9df9a2e3","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.8","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-z76c82XT4Bbi0xABgpsVKZKKl5Q+nBITT21xhswgxtQAXnnCmhNklF7yYgYVa3QHfMLVMydnudLs8DRItvv9uQ==","shasum":"967d441ea135f64a259bc0dd22d644b29f2b6166","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.8.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Hn9CRA9TVsSAnZWagAAym8P/jSV/dhsAYGTRbB1U4C/\nayvyi27KbKMwhm7YMnHQwzCXfF9EjOFCZsvd9Ysy5ImT/WBL5QUgl+t347XX\nbZvfKvmBf/FZK0eBeNdXV3nEp99OUDy4rTMqGvrznKrx00+k1BtFwOuTcA9O\nxElGtTxFAUzUzhXDAGcXQv0on8UjSQC32Xq9kbHe73WSKQRroFFFBCmbZgeD\n5ok4ufZPRvm1bLtUXBnyzEEEmhgYZlFCyEj0VMnT7In5gpcNbpYHHOdxoAD8\nTF9VW1DRL26utIOrWfrRDDiodI4+CcA9nPhj4nnYhjJxjXdgbCYnk9E/Q0uC\nLksS/D1YdVYSz9Zhz6xmVFukKbq45CwxWFQPbfOyGKuBhVCeH9sF4CVKNQmP\n7Tdiq5DflzrVvKCb1kYTGKEH7jqyPnlZ8GDyotX01nZnQS/6LvTtRszovc9C\nutsbFmUr+8S0w/adpA9jc8ylHzY2TvYgiv98LcVGge3aJTkhidzH/aYRiUBX\ntQRxAbKdkMLdjBDKX+oTwaPeTM1W5ezCLacxFhgzZjk+G8dJvOYAVf4p89F9\nRCov7avWON6USWiodXdUsgFGJAhrduKOlDwgrnF1ZitQEuWNbnfp/75JUQep\n22m095e679THBJTY1FFEKkyt16AgyjNlorLeiBn/e3/vAO+St8gI28W3Jt+G\na/w+\r\n=avV0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJQCBt284sR4Jz0qsBEzYAZ5Qo3n7liIRd1/U22Z/EsAiEAh4iYM1dNolU+3WaMfxw0i1wE/uy+zpE8oQMYgMtXHEY="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.8_1574730236679_0.33426562328827414"},"_hasShrinkwrap":false},"5.3.0-beta.9":{"name":"@storybook/addon-info","version":"5.3.0-beta.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.9","@storybook/client-logger":"5.3.0-beta.9","@storybook/components":"5.3.0-beta.9","@storybook/theming":"5.3.0-beta.9","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"82c574db7837a5f748e47a5dba1efacbb0214689","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.9","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-gjcWkiHRCfY233bhKGSWPW6nYaK+NUzVPqnU4Slxtz0bzI1istCpYgPMpKE8wOs4mt1RJgXTi0q9g5zYsqVE0g==","shasum":"d5cb0a0948cc436322b6049db572f0e9373d3e9b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.9.tgz","fileCount":38,"unpackedSize":229012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3PX3CRA9TVsSAnZWagAA6QQP/jFdrO9QFfTLFaoDA8ya\npBp6BFPfJylNnBJXgUOhXzRfXuoccJPFlXYWsndm1Kw3odRkxZbiaKsIhfTA\nN0MHjBcmss4G/DPTPNuXbELxTINNQqjo4dtoPhppeUps30/zOTK1SUQ+RBi3\nO8MUMMTEtL1Zut3lUB+r3/wLc7hIT6z+YjAauTqycT2rxQgpKR8pJWHkWh51\n3sXlKePPflvGYh2I4oIco4Y2rFiHcghFvyZtJpfl3RFCuXu7C2UYcR/A0rgv\nW4A6ru7i5Ffpc5p9ZX6juBJKdkJ/sRNDPPN1Tn/ynm11Bnz8Hyf/qcbKnlxI\nepcJ1epqQSrD/ppE35180ytakE+9gPktwixsP6mJusnkTQuIv9suSGXADLp3\nzA9S638HR+GtL6COHCUbDtXRFlBxr8r80/eCBzxqzY9um9Zk9MklZRaOulpO\nOdQZhCuxtOssduzFBtNLC+K0DpqSL2DrnA8aeij15O00HnokTrLvzi8hP+Iw\nlFMAlmBFdMdgCJd4JKMAuK3isAtig3w0dfoi++1mF+LZDAJMQjYFFC93Z1Lh\n1nvJGOxNiWjy3G4B7i+8VgUORW6upr71at2eBRZ0IPI33yqSjNUo8hUNHfZO\nKUIqaG8K+NTTag3F5pqC4Jvtpp5OdaXHlAXvVlWUvNr5BTbIKG2ZLxcyeCvP\nhgHW\r\n=Wcaz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWhTv+o9epRWpSxhCHfozUlko2AGBfRn9Xv+dRCbe8jAiEAxDKnf+vZCrmlw7S7Pxx7jznFIGc8dKwpLSctQUwh2MA="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.9_1574761974540_0.7089799236696361"},"_hasShrinkwrap":false},"5.3.0-beta.10":{"name":"@storybook/addon-info","version":"5.3.0-beta.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.10","@storybook/client-logger":"5.3.0-beta.10","@storybook/components":"5.3.0-beta.10","@storybook/theming":"5.3.0-beta.10","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e098a12bf89f4a50b991c5aa400dfbcaea03706d","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/config.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nstoriesOf('Component', module)\n  .addDecorator(withInfo) // At your stories directly.\n  .add(...);\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Your settings\n    },\n  })\n  .add('with some emoji', () => <Component />);\n```\n\n...or for each story individually:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .add(\n    'with some emoji',\n    () => <Component emoji />,\n    { info: { inline: true, header: false } } // Make your component render inline with the additional info\n  )\n  .add(\n    'with no emoji',\n    () => <Component />,\n    { info: '☹️ no emojis' } // Add additional info text directly\n  );\n```\n\n...or even together:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    info: {\n      // Make a default for all stories in this book,\n      inline: true, // where the components are inlined\n      styles: {\n        header: {\n          h1: {\n            color: 'red', // and the headers of the sections are red.\n          },\n        },\n      },\n    },\n  })\n  .add('green version', () => <Component green />, {\n    info: {\n      styles: stylesheet => ({\n        // Setting the style with a function\n        ...stylesheet,\n        header: {\n          ...stylesheet.header,\n          h1: {\n            ...stylesheet.header.h1,\n            color: 'green', // Still inlined but with green headers!\n          },\n        },\n      }),\n    },\n  })\n  .add('something else', () => <Component different />, {\n    info: 'This story has additional text added to the info!', // Still inlined and with red headers!\n  });\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\n{\n  info: {\n    disable: true\n  }\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\nstoriesOf('Button', module).add('Button Component', () => <Button />, {\n  info: {\n    text: `\n          description or documentation about my component, supports markdown\n\n          ~~~js\n          <Button>Click Here</Button>\n          ~~~\n        `,\n  },\n});\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.\n\n```js\n// config.js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false, // Global configuration for the info addon across all of your stories.\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nstoriesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {\n  info: {\n    TableComponent,\n  },\n});\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.10","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-NrT+S98Z8hD2/LljlFLmmxq7hYvTtp/yzmO9P6Lllvqb1CGk3rQc+iT7EftXL+FP5oeNUqYLEjDyWio9m+BedQ==","shasum":"e1867407bffacff900d3a00b0cf183977406b364","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.10.tgz","fileCount":38,"unpackedSize":229017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dBMCRA9TVsSAnZWagAATkwP/imBoQ/Fwo60DKyTw9j/\n79e0kk3Wzm6QMyUPrIVqQ1K7Of8dMyjfpf24ZO37NB9L6KuHOBPbNvN45YtG\nlkR5doP0aaKfD2a+o/ftZbRmdEKXDPE3k1LTKd0s/SwvYEo7fo1RJ5/UhzV2\nlytNAXKayPf5AaZZqhBWnq0csMOV6kVPn/PXjrphN0nWa6qTBe8x+EscDA7g\nJGegR2k80icucbr8CHPGxSfFFkg9P5Jwia6D1u9KpfEkDtjn90blvvWd4EbH\noWeMGlQi1guTwVIijBF7N24yr0zhZzA+Fbg9FHPeP8lAqofK7LryVww6Hue8\n4jJTuONyleHYCPZcrOMjaNyX0VdL4SaINLxqBiB0q/ZVV/onZpIhrBwfseMI\n6IeAXkOkmw/2s8n2fj2uhtUqh7y/1h2wVS05UAk/AoXhl4trLv7/UEewgaZq\nBcwyDOgxqbbnaCMn8WM+mVl5rF9mrdH5/BN1b99GZtjUB9T/rczSULA3k0+b\n8g9Z7wqrUdUkpP8txRzWQM/fpEUE8VeVwl1Sze8LPKlI2kQYAz5XBnT1yW1J\n1YLFWQNOHLghMYVqOXyHJmi9zIB7QMTwrg9tswmXqLGBueS2a3+aenOyU4gM\nVs56caSqppNd4FJJlS2tNOPkNca+MbWxs0QAG0O9Hb8d1OZK0Mk4WHzemsS+\nTiAK\r\n=yIjZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeZMXwhabs4Dz3gmkIiq0qcIjGRgHCFXk1DxCkQadCrgIgATpuRf0xbTjShHIBv9lYlyV0+Z2k+bGSMR9sV8l0+AE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.10_1574817868003_0.24737143989617794"},"_hasShrinkwrap":false},"5.3.0-beta.11":{"name":"@storybook/addon-info","version":"5.3.0-beta.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.11","@storybook/client-logger":"5.3.0-beta.11","@storybook/components":"5.3.0-beta.11","@storybook/theming":"5.3.0-beta.11","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"51b1739038f6612b7cc6366c49e4a30c21747f1b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.11","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-qDzUp7Nx1OvuRFaBjnoXI8KFPmRoAyuCxxfQ7IUS2D4agnr4vVz4VUUpIjvI39TNfRKwSAKnQWu+ztl+NP0L3w==","shasum":"bb94cbedcba418408852a0e1cb672a1f8221632e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.11.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3wLhCRA9TVsSAnZWagAA/uoP/jVBs+MmbKF9FNxpH6sg\nEFb73APNV78sxCYK0yLLtaWeMNDGuFPQInjRBg+2wmwxPcoM2Kf7hc+EvbV4\nAZC8Jak336XLr0b93mOa92HDyqGy845jpBuLgkzokYpq9zbkmb01yF8QCwPm\nORRWXOyBkz+bj683AwMlv15690hbSUCZYc0IYd2dGxa59OQDTFMcKoEP0z0B\ntci4exdSAJER7JydTGU2n51bIkwJieZ5Glk8sp9xdJ0ygaG/k5vnvLvv5QWu\nx7O6E472iYuwHjG0Oqz1RTXetLmMAzk/ATcTWtHmnKFLtZpaMkEvAra4v8gH\nYXnKsb/CELN7hoQcxr+dmtkZrlvP6UC5MOYCwCCHmahLqdHjuljaVWhIGaw+\nWX4BmDSBuNhp7lkKPrUIZ5rGr6MH/AS2oCl0W+eDbtdFvX6kuvs+KM/HUYos\nlamfhS6AgdK9CWL8j0CxqMA6Mf4drtcG++ClFFCIO77Np2rJU2qgElM0+o+Y\nCmvkpFHbSI0o3bLYnoRpbr3hDcxnnHBGaLnDVi1Q5+B3018jlEujblgQu1bS\nDFgLl6gDUDKpCGtLIspYG9yB0P+In9hRJJLzPc1K8t7i+8nhelDK9jMgHP/0\n5HHCMeJsLzJINw2Ih/7ag531pPPIg/lNqF/uyOuICSysyDd9kGVi2WQuiUsY\nUfWY\r\n=aNsP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC/NA6IkOsv7lKKZzTsL9aNZ3mhS18jyXywM9PNVs8hAIhANL19HaUpTU4QA2AJGbomk6IKwzCOCBWEtfdhOmlrgDn"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.11_1574896352988_0.22109168230475462"},"_hasShrinkwrap":false},"5.3.0-beta.12":{"name":"@storybook/addon-info","version":"5.3.0-beta.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.12","@storybook/client-logger":"5.3.0-beta.12","@storybook/components":"5.3.0-beta.12","@storybook/theming":"5.3.0-beta.12","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0577c421a7c7d4fd1f9c03ff22cd1cee0b55cedf","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.12","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-n6jtIhz5CTP8pqDUyJtUSAIrO28YWnLtCM+HBehnuxGd6+TDBXqIescZ/4jRqbPUr53v9a4XNsWZ4mqFgcoSHw==","shasum":"65b3ad6cf6d5c0b3ce5955883843650bb08f3367","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.12.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3/9ICRA9TVsSAnZWagAAPmsQAIqSSMid665EIbAfI2qO\n50R76qS0au9xLM9R5izxWaeJb3lhG/BgybLMZ7XuhLIwlvDJxqKVr/xwmn4o\njP3ZMXZSg6CHAmHDlMNTGqeRKCPitgyBDV4vMLu0aREv6RIk8fHTNl85xyfv\nZAwZqAaJKkSn/qcXZxW4wNvChtVdQy9URxTEQJRqTveRheDuv7lSl3rgs6og\nIc0ZNWj3UGAK+WQNFOqYNQm1/EGxZj03+BOdhppVQ4qEdtlrbrAqxAqT+Gek\nt8iYgj/zSOAc/caqgXcX3rUGaVJSFGGWXlpX9z5OK3t3hPguUGeOOAURrl2K\n9OVmzz0kkqv96vhAXnIUMf3JOoBdFn7bOWvWZCRJXFvlUCdJ7uErgl0/64lP\n4iIHA6RORWIUUAx3AfNCxZ1c3O5a/r6GeAt6mJN1O7OXW1krXOpV5cEk7yHX\nq8VWq3aXLoAigYCk+N97ov/Bir1hTSfUwvURnHgwrwzqnb45HPKf1+BOBPHn\nO/lhN4wwidK9BgYbMTuE7CihbaMwiHstbcT2oaKDa1NBW+il2lorHiUhfDaM\n7Vdy3Kvg1QeIFvWy57eJRh8Ko8xYF1UjfKW/NolZUhqIe/GI0r8uMi3D1WK8\nuWeniixTPIZxkz4ZlYiUC1Mmz7ZjPERr6dno9rwf9xX02BXmf6raXHCJsp4d\nTSCS\r\n=ZJIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0zouqj+hvVLnKCEjZavAv1SoGeELVAdNaE9XFF4kljQIgUq+diea3ydGoZoKe/mQBza6wIlMZ/Y91VmO1AZN8e+k="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.12_1574960968310_0.20119209613502664"},"_hasShrinkwrap":false},"5.3.0-beta.13":{"name":"@storybook/addon-info","version":"5.3.0-beta.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.13","@storybook/client-logger":"5.3.0-beta.13","@storybook/components":"5.3.0-beta.13","@storybook/theming":"5.3.0-beta.13","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"830455efa9a647d14ccb0b5db8d556c3a98fe3ee","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.13","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-YE0XJiOwA23uH1EupgvZOaZ1sa0xx3dq7wIlluNVA3F1ljmPP1iiXJgHP+VI2DC4rQb0C10v2L2GIowp8ZMXcg==","shasum":"835e6501dfd617e0bfeb6d36854a14637fbd71fa","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.13.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4jktCRA9TVsSAnZWagAAXowP/RFl22brTo4jUaTsPGTt\nPa2fMno7rjZ8ak4y6jE5lx4o2CG+FEK5TWq4aN80KbsrSe7ZrzJ0N3L6yLFN\nC3c9ZUwjUcpBOBCpQFLQ0CtARmlfMbcgfI3ztGyGm2o8OYEaRM/gHxUlmYn9\n87Rc3YDdyl/mMgofRk4a5UhhSe9gOKf/Vi7DCA5wMRFp3QdcukOnQIl4BGDL\nLIAsHSu4VpLACBcGssUonOduflfBDuGGV4Svr8mjEYsad/0gn3aP2dmYB8MD\nR+puULGciujODApuMty2HNluhnh2Y95pce/IX7qc5F7Etlc7VXlaXWpx53U9\nSF6AsU2/2s8XV/x0fyF8fuj4LAkMcE73WGDFFOoN7IrO6EUsgQu1NesWF5Wn\ntXQ4YWzfAflKR8LmQxTB4T6tMC5nud6wGdSOw1XMF9AXunku2vWKyovJRuPU\nWrxtHiCVc/yEPTJPgXJwSVWUxMO5gjPWovASc7D071bibaGeD7ajWSY4ukI6\nz4JRcK6SH/Tz0IlpbY7Wx4L09psPISf/Z6zgg0pq5FI84LQiLNon/HunSpr8\nQtonT52VixEbBzrpX8fwoMxPltLzTaWXNWJZcMKalSk4YbpYg9J9UiiEg5WB\ncAYGOah1R+Yxti3QqBuKbB7xWTtSCqssWJvsZUKJhmWMDLKELLV/rUW3NXbZ\nVltj\r\n=xOcB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnp3mMABzXE+rDygnHKhHb3m7h2PQbyzz95g2qDG9KlQIhAMrw9lb94TgwNNoxQrFMetZaAuoAAFepso2z6Hi17wgl"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.13_1575106861174_0.9753619055087202"},"_hasShrinkwrap":false},"5.2.7":{"name":"@storybook/addon-info","version":"5.2.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.7","@storybook/client-logger":"5.2.7","@storybook/components":"5.2.7","@storybook/theming":"5.2.7","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"cc73963b943213cc0e7f291d4d813d5f04c161b3","_id":"@storybook/addon-info@5.2.7","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-h6CTv34XWaNNHGJwOki76wtfYYTDu21fBMeV+oGTb0NNZWZgmNNOvlW2Fr8cW2g3kYAoiTWwJOh8b8Ov2+kvdw==","shasum":"d452f68e5ebaf54618310440dd1ed0309a6a8b27","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.7.tgz","fileCount":38,"unpackedSize":267970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4mujCRA9TVsSAnZWagAAN7MQAJ0rkxDvgXXkxyOxpGxh\nsRYFfTc3vs4H2iZC2wO8oWuBNytueR3fMwepfHvBEr81SomMfeqM+6kg+XU6\n/Y6WTOSZhTPPQrHUQq09LbwatsrJIGtuQRhZGEeMOYpwH11KqCsKE1XktNeX\ndAAl25cBD+R9VhAEI/+wAHGwQ9CX+oelJqNaB9USYunt3J7SbXmDUzpswPuE\n2LYvPBR+XiUUf6xEH4TMA2gUDsBttuyN0IO5fZw8Go90JWjvGbudJUsmJBF8\nQ4/0JebkQ5Zw8wtvyx2o99k7NBa3v2mwOptPWTPSG4Fo5e6HkfBniu0kgRDK\nh4s8W+yaAYWs6CHAM7+L71tZreP6dN+TLQqip519hzfVsZn0NktM4l2Wu1pe\nasprLFM4k0T63t08g6iegtWJYD9czNp9eGCjbVhzBTfqW8N0xPrg9sFtBziO\nVoGgT7/OJpSQEkLza8W9RJp99sGI4Q9JzyZT4y1mjNrbEpkJ7ZURF7eGe6SO\n4hsZDUe9nUZUsMdjMeo8l/BKlRv8VRZCOAJvvJvhZ+nYdAMR3XMdwdhdci6p\nGvahC1FZ1WVkFCbim1GmoBdJ1GyYMiCQ4XTo5n4esQV2pps3EbKcYFO+Sk3M\nsofrOoANQgTfzzNKth2pnahc4pyPrweYCZiD+ZDYB52cEKQPBqJyufzAT5Yw\n69Ga\r\n=Znqz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjc5x3FpFVukI3u9aNf05iyytWjCk403as1VJtapz5LAiAXcwIzBwTojLhYD8z7p5x/PT+Xq06wQplUWfNbhi0QYA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.7_1575119779159_0.3326302546445079"},"_hasShrinkwrap":false},"5.3.0-beta.14":{"name":"@storybook/addon-info","version":"5.3.0-beta.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.14","@storybook/client-logger":"5.3.0-beta.14","@storybook/components":"5.3.0-beta.14","@storybook/theming":"5.3.0-beta.14","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1c93a96d8eb248ba1647dd64536cf7f9ea9f63b0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.14","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-FOPscmqPxnqYJESAS5FyjvLbrbjsTv4dHLNzKWoV/Cow0ITFy43EtDLwPMTsPIP/6AqGHc8W9Hn6A57m3N+y8Q==","shasum":"75203a606b14080ae46436b275b7c224a19f2530","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.14.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5IjvCRA9TVsSAnZWagAAoAwP/AoR6PD3A70npqBP82/h\nDcvORRbZi2m4QW3bo9vdoqBsXDv9smSG0PBDtKh+9+j3x0s3yOAYsTWQD9r9\nVDgAX2JSQei3lTr13aAjuHi/6hq3es/8iwmiBFDf4qI3MGjwLAmL5jBMmWbc\nomt3VDNro0o1qoZlNQ596AdkXCd0AB+jJOPp3DJRVNtv0IlqONvCFjMhduLi\nCe9Yd10KsYJNc9ymgS7prH9b269bl3qLSDFwUJ09zd5Re6Au9zHtTRQQKzto\n6OT7uvTUgMaG8CWy1+u+48WQjJR/0GupjPNMEkRfnylpf7nbfTOSvxUDyI20\nWb8YhXQz1QACc14Smpr4CCSVIyBlkenrNaeZiknhbOkqbGgiL/4fR3Z6nnHi\nG5hIirMRWxCoP8aHDTKl+6I/XhPuJ0GYpJpxmMQAiUw261Y3FE+mVi5PvULo\nPxGHSwJoag0EFGwY9pjpP+/ducEykNvhLQNm9eTTiemTFqkBEdfqZbEgbq2E\nDsm3i1ZbtGqFOD0H0xc+cxcFd3NTtoZwadSPZ5b0a0hwhBKWUMQp2ThoG4Du\nEcMIPCZq5zNoMsmB0N+IObYAu053hCWkXNhTUaLsnokKlWy6nIYdsVdI0e0w\njQuxEbcLzOAw2rBnbg+QOpauCfo6Xttk7Lgw4vHM8FF8Hcx/ZhjulRoy2Tkc\nB67n\r\n=h9S+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPcrCZB1HHbHgiTj5RuBy7nVwAl8JorPZvE+qcByXu0AiEAn4eO9j6Whfk9bK5V8uy65i5pz3nRW/IIT6HhZxUZ6yc="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.14_1575258350755_0.3672918119313773"},"_hasShrinkwrap":false},"5.2.8":{"name":"@storybook/addon-info","version":"5.2.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.2.8","@storybook/client-logger":"5.2.8","@storybook/components":"5.2.8","@storybook/theming":"5.2.8","core-js":"^3.0.1","global":"^4.3.2","jsx-to-string":"^1.4.0","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1555b7b6a159a9803e2bf48fe4b2095c27b810dc","_id":"@storybook/addon-info@5.2.8","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-iY8malDF6yayLfpiffMwDXOWeeoXdRbxse1f+kNHK4aVEUXLyh+uiogPhO8dzVDy8dQw1LP9C7xKZe2Dls59kw==","shasum":"bf29741c21c16c85f4a7007606e8afa3eb77965c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.2.8.tgz","fileCount":38,"unpackedSize":267970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5K8CCRA9TVsSAnZWagAAMc0QAIRQfQmaggjO8FHTYt79\no4KMzCvBguNrsEhaYRmoVNaRyuWPQRiq1ZcKiRe7NkYCbRVrQN3vvz0W91k/\nVUNbFUFZ026WUhYT2zZN0DoOKfxp5ZuyYhfJ+I5H84sPWVWb00HuKo2JOWZX\n2y/Az9xWjFKIdTLZQuPYVfkdwWZfGJmxy3O6DsW3944YPAskEj83863u5LJE\nBRcvB1F0SQw6AVIHw4RqgWhv/GN3xK2llR7GSTwEr/NnlbG7fEssuTAfVMSY\n6cZ91EltALFRiMn6vHcoLFyE0A8GEKa1MHPrUqUt1UbN5BXJex1//hqDezwM\nMpvfk+CMAb/Xvg0SDnNWToNAObcSPwCrdvXY+JWcji+CdLM304KOE94eusWE\nwyxW/fInkLqm1id6+ax4262puj+f9/L0hLpnobg2WrstnSjXOq/tOEaizjPC\nctehV6joMRJ/y9ebxoRjRNq5KYR7klDVj95PcfyVO3IqS18gHgHv13j8w4Mb\nBhiG+HDhPT1Q5m6VAPcmLpa1NcB9fFAPBJYJ9f0bSnFtE5EnjcKJyD2eF5hg\njgqBTi61TlqJ80hIv59iH3mTRtZoiIEAi2g7AAPUd+5q3trUXy+LGA4ooTiE\ndssjGHoQ9GpbrBhhdbKibYjNl4bHnHFVgnfszWGuUOYLCBBElUypd3oivc01\nso1q\r\n=s/Se\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5El2GGpjEn1kLum4TMju2mfwuhPYjZnTKwKtjqpMRAQIgc+GAPpznefH7v3vD5PY3j7nBC7QxKDJOIZ17+SEbzR0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.2.8_1575268098148_0.49447431979792467"},"_hasShrinkwrap":false},"5.3.0-beta.15":{"name":"@storybook/addon-info","version":"5.3.0-beta.15","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.15","@storybook/client-logger":"5.3.0-beta.15","@storybook/components":"5.3.0-beta.15","@storybook/theming":"5.3.0-beta.15","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"95fba51683681b34117c9f1076d15bb6f257dc86","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.15","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-uqY/POd9m9M2Byod2D3ONLtNOMac/NBDooFCJ0UF6/4kr195lBExxyPE5kv6al2npMH1RlkSDraZ7JSxVPS1xQ==","shasum":"f339df1f867ce08c90b00e28fa44d9562d717d41","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.15.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5y8KCRA9TVsSAnZWagAAFHMP/2TAycvFvrQ5HdBoggSC\nChdHV1KvMA2LN+bB6SCT08/bxqqRWtGDfgjq7oRSk4o5ErU7YNQxfa/kJ5aM\nSuqh5XZCUQolA9TIgyA2e7KeC8Dt/wi/ba4H86loTs9jUD4ITjUa+qUTO0KS\n/aS03W16Dglxi11hgoCDHR5OTlGn5MJqVi6eZI8jPyuh8s50KUK//RYQQ559\nUtrcey8rdLgaPOawYTdGeBFEDciz8yVQ9m0LkZBO3dM0O5pIgj4Z9+rGgLRx\n39V7zyeKVcx4pRLFHC12gBnF6Hj0WamA8ja/shH9S0Sx4yyw90e7XsG+AFi9\nR87VGfpPjhFv5+SMUAARhUJaZzZpwAx9XvyVg3v79ph9kYTuuMxcR1JUe81V\n7hbLQm4bNZ73ocSL/5e7eizcYE5LFVEeKch2QqWJEdwXvL9khB/Llg3V3WJ2\nLFiDgi1+p9m7il4gLe+mSBKxNfslM9xWjog/STidO84FfZogHnJB/FCQoQL/\nNriWQDe0vMSY/Qqz/Dauk+mCOLTCoj+tjTkZ6DI658au1MdoJp6C3ltkO+D8\nsl3skXdG76W5KrSmN31FQaLq2HZPRFpS2/d7EMRdY0yf6zwnqMwGNj4REn2z\nPsQt5arSbBng1ywNdKfXBSFUFAX82TlRyshnl5/vWbhnpKRRLKWiGnSviEHR\nVYyJ\r\n=xLDn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXXUIHSw58QRJPpS3grADGb8mpUGk7raypX7jSuvtAZgIhAO3fSvCMFYkGA6K4uzFDKJs51KXvJ7kToyv+/SkQQvJa"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.15_1575431945740_0.5342940030272378"},"_hasShrinkwrap":false},"5.3.0-beta.16":{"name":"@storybook/addon-info","version":"5.3.0-beta.16","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.16","@storybook/client-logger":"5.3.0-beta.16","@storybook/components":"5.3.0-beta.16","@storybook/theming":"5.3.0-beta.16","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"eeb36ed8220c52ba15420a090f415ce2945504c4","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.16","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-2XJUdeKQraCPU87vPjF4lnqhZKi4T3/Ay0SDTulMKk37+4yPOeomaOFtV3mn3PJryCsoG0ATunLDQoZ4NAUctA==","shasum":"d5dc584184d2bffaa124446eda45bb316ca0a697","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.16.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6Hy+CRA9TVsSAnZWagAAqhEP/2t9peZoM1BEv+rpaAXx\nPSGM8CJDVWfdL93g6Z1uSg6moXDD5o/kQOxC7SCUWACY0AQEoyjVUhz7iOcw\nW0mCKd9VDs2SpOa8Apot/ywFut+awGbrl/jT+hdb5X0bScfGcNBCbN0xDxBB\nE7DobZ13J2Nkg+J5AtWbfUtdS+7plqj7D703ND/SHOx6mBJV9E89KkhYLbLp\n560FE1imzj6g9MyQm2EhevCejGW0ItmNQuaheoFjmXrg81AyJpcFVX/bLr4y\nSyghk6FY66GjZtRaYqOaXxTHZ5QLazacaqNTSGA++gwCZfWq12Z8Ob/5NAPn\ngeMiFFDubqzMAc8FzPThEIByqEVgH4gBUmOn6Sif6j60qXcR+1dZ4lPi9qFF\narEvUjg4Xqm656L3CqdhqTGktsJ5AryqmqBxAd8dLN71FJmtz2FtVhjOP6IE\n0I2zVJ07pkejAl5iAMGcazEprXhMTliumdBolmLokB3ZYVz3PKK9J9ObnEbR\n9IRReByv3+gcxv+3cOolYpC8Wn55KkbtFQ4a1rrc4IMAG4eL8XJwL/IbOGsH\nVH61lLzgMrSNY8OJZdOebOXKj2VYUvm3PGen2AplObiR8jle6gMxUnDX/Rjp\nzT8h/laLt0zAgmYCm38SKRJO/SGsXB+4oEkPiqu0QzkzOHCDaSdDwN/uE5u+\npPE+\r\n=pl8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBs63EEmhzfYyXupLK17An8bIIUQYO6Uz/a02JtJUW9EAiEAuUyEa65tz2UCpqHNndm9zjpiNnEJNL+TRAnRPrDH+uI="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.16_1575517373674_0.11051567002746121"},"_hasShrinkwrap":false},"5.3.0-beta.17":{"name":"@storybook/addon-info","version":"5.3.0-beta.17","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.17","@storybook/client-logger":"5.3.0-beta.17","@storybook/components":"5.3.0-beta.17","@storybook/theming":"5.3.0-beta.17","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"796951f038d31a7d461e790606e6402bbf197c84","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.17","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-tF8dLYOXUuEEMoZMbm6qNq34ALc88pZnC7GdsnaKLLssaweYov1wNS/E0kZ/SAv+UVBsZI/dTgFKA1cvQNGxAw==","shasum":"d46447e8ec1b1efa0bec551aefd1ece06f6a8ea4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.17.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6ml/CRA9TVsSAnZWagAADwAP/AvL+o2TKMNf0RC/413P\njlRJq5eEs1c3J1rDgmqAPrVhk1KhDCJij6fzEUPRPAzAiy2cxmc94Qw5S3YE\nwXfyTaoqU9spkvB72QC5F9knX3BqLtGpVmb7t0GKWQ5H7bJp6P/9tQZxUYPr\nROuz/kr26t0wxXaDhxtFfdE5+xAjVKsVRDmygzQ5L/JxUy6kopFE2ryIv/NN\nGOO1T2korAWrx+srFjvJ97P9mbP98xmJ7cr8HNbU+VguyHWvWsWcVfTi7Syt\nM1wuQYR3HyGow/BDfq73QmKcsdO8UM96AoZWj9fQZKM3JQSaE83boWutQ2Vl\n0y7I7fiWYrkavXNtprO2tSm+L5XO+59+1C+xxcs6cgIHOxTDN67Jkpord5/H\nhQUrC7jyzbZvJyBDkFP1RKgIt9Lehp/RoBWHo/dNOXw+SZI0zmEPlrZyBAaN\nl8ytUVVbVJPeR46uwBvhP+tUCXwyWU08ib/ig1uy3UP86eBUUAMNBm8N4+Ju\nwCuyI6oNJ25uUXXmRpyCY/a1K+OW/Eqzf6oAI3z8Ug9Wu6jlX/d89uy5qhAS\nbWCkOvznWmDAdCmLi01+nk6fPx7RJG7dWLisHFrVX2rl3GiLryqxEUIECHW0\nBlSAzOfXPn7kArXvWMoxhBXeXLKNlS5SPgL2+ZeLyeN6yQyQGNAP/ntg893u\nKh+Z\r\n=HNJA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkUgfFy4/CtGlPXhp1Fi/azuu3sAN81DEK1T6jnSLpHAiEAkWdw6tKH72hj08kEy4IzoIo7dZWaRy3qdoGrjKO/S0U="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.17_1575643518594_0.8404608381328662"},"_hasShrinkwrap":false},"5.3.0-beta.18":{"name":"@storybook/addon-info","version":"5.3.0-beta.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.18","@storybook/client-logger":"5.3.0-beta.18","@storybook/components":"5.3.0-beta.18","@storybook/theming":"5.3.0-beta.18","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ab6ef5333017d3133f5037b5df39a3eee4e3f05b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.18","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-ZbgPSb9vqY/4Cozuhu7h1xXON92b2WikwzwmWR6lOoZlL3jfh8EFfaUMshbSX3htoLQPITF4ZiRyrudWldaO4Q==","shasum":"08dbdc41b277fbaa2869c6ff31352c457f85ffe9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.18.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6m89CRA9TVsSAnZWagAAikMP/2MpDjtWKftXN/G5w8tP\naFBVbHo468QRseqkzP4aglOqUcIFrldSg9Yiz7uUFS8Ub1Grt0B91DDj13Wt\nA5nyIJdQkc725oQMmy7EgVzNrcHMPvw8S43a4RoPZAEIyi5LMZ1EQNbuJ5H+\n34xkKAVmhoWmX0GN9eX1ywTT7KH6gkf3RJWFSJq2dYYgZR5L18AI7u2aYWx9\na3nFEIu3x9zSbzQJkWzyFft3NWrsaZ2bSL6ns4qyFcn54WmVJTI36/iWBHkN\nVY1JlmmC1I7Xq3WGej4bHoiYo923tV68x9IZfLPUOwYLTQYRe/JXNDXGJ4tQ\nkGaOOw292ExoeLUsOXOwi1hp0XuvYlBJj0ryfbJAYzNicxiXEoHxDHeIprEQ\n7vAlkbqRhUrEzvhRDHMyOc/zw4ZgjyUDxMVvN+hnSyoGzbqwhJ5AmQWbnm1/\nbJFKfJFIbC5CK1jfKSmWqsPASRq8eCHl2h9oFRL/t5cXWUZGpzCQR0sGsoFT\nvzhlVgnc98pZY8RXGqu3xv6MJRZq3dnSFZC0Fw2tEb7CFFeMzKFbcLcQOqwm\nb1aAXqdg3KoK6NwWjDG1AysaOWdtYEzm+LyLMFKSkjcQzjmWfby01DEyypet\nDy92kBA2IatU7cTVYmKC0CR+Gxmh7JQIRQ33ZAhcYPz3s7dRqA7Z/hEd3m0A\nxi0U\r\n=ZXZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIrObMox3DCIrDlPKLtV1qBTkm/UiiV9cinIY+6TZzJAIgT20/ZNKAkjlorVXld4XUv+roaH52wUxrxH+lU1Jegyk="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.18_1575644989059_0.29613872463563884"},"_hasShrinkwrap":false},"5.3.0-beta.19":{"name":"@storybook/addon-info","version":"5.3.0-beta.19","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.19","@storybook/client-logger":"5.3.0-beta.19","@storybook/components":"5.3.0-beta.19","@storybook/theming":"5.3.0-beta.19","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9843746f3a0a831a2d9c234f21754f30ae403965","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.19","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-ul7VVM3QqeNQ3TS7gYIS8tVScNbHh8uuMaGte3XHLOyXhv1Q/hKDGfwlpWFJsYMiD93oRmUmwu3jstqnIFSVTQ==","shasum":"d35c91ad1ac66fdd6e8e21f1d7f88b0928089a48","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.19.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd62hfCRA9TVsSAnZWagAAzz0P/0BKBdPle8s287x98pHS\nZxfWwrgcVl6NuUX8lAhYAQK9mq80RyZ58zzCDd+GvM8jmUWaT2+d9aWMN57E\nJJ6HwPjdX2mXLVVQaOGEebnXsSZxXV80sUBI/oy2vioI9UiQl0Zg4HC//oqP\npubRu6lYnejIqXytiwg0LivNx7Hkn2W2KCTp1Pilu+gYFqVyFFIsAab3PvOB\nlsVNMyuMccOgTVH75G+qpsG+BerI+Bo9pmDEBy4LyLtkDNIICby6xxEH/FhV\noHD058vUMNRH/ubRsi4dHkRTCln/41zFmdLeQstB3Bvzo1T9Z/n0plIr73sq\nScBueDjku9oNBlS5fZ4vj3vYDbRIVtPZlHZeczYaTJQQI5VWYQxTIJXMAR/z\nhhH3YuOkj6BiMJFwu8d6dnswkEa9BCH8yylMpJLqytuod5sBnCpyYJqM1/jY\ntCGSxvYVnw05W7DB6dcwFONpFZI0IEMv04aC+yMtDPAFT2DMTI+rmNNEv3BA\nu6Ulo18U/Wm+AbNoLO5Qd78MCSO5uDNc6q6bt0UPwID9gWcru1uNZ9WhIrNw\n1b79Vy5P5Y9EvVSQLURNS+bG4O35wpTXEReOfJB69a0ucea331v0+vJCOfcm\n1taoJYHBWyP6wpQkGO/jDDUeLu/w87lmMFPEH5Fd2h5Mtq1yHgF2hXIy2XrP\nIWdm\r\n=DrpG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoINILWmH1SXnMFvPYEEOSLi/k48XYH/OQz4S2F4t/wwIgZ0Y41rZrL/I05hjj1BZR9SCJfFOvHzLYMuoyj0TAndc="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.19_1575708767308_0.5240197547369676"},"_hasShrinkwrap":false},"5.3.0-beta.20":{"name":"@storybook/addon-info","version":"5.3.0-beta.20","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.20","@storybook/client-logger":"5.3.0-beta.20","@storybook/components":"5.3.0-beta.20","@storybook/theming":"5.3.0-beta.20","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5d890bf37b8b20d6c8f3483166689afa2e030a76","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.20","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-8+5uTriPHtzWCNi/ICa81YalSVOwv8yLdFbr20vJjIZ//FZRvWxy9PTiNw+KkyDzRviziPKE8miv44JALZQFyQ==","shasum":"f43172da64d993c86f22da9cc072c15bb07ef853","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.20.tgz","fileCount":38,"unpackedSize":227472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7kQzCRA9TVsSAnZWagAAcb8QAJvToy78s1mc35vEOF/L\ndrW08NEaFI0JrFPrExsj4dJh845NUfcbbubB3DFR8FYUXGszbr8GOJG3Z9jY\nH7sIPt0i2FjmPlR6hhDh+4ozy6KbKfsZBmPH3sfKEsfCphsW2yRhU2rHoTN2\npC06arQ4oCfJSTub/bzWCfT+J5p259L/lGeIj0pc6i5Tc0ZV5hzRcqBvRkE3\nNeYQZpfN61QWpu5xNZNzbG69amA3MzscdQq9fjSQUQeXuDWaFgGMEoZAqXrT\nLmNEXkoxLmxKIAZiId1IzvlazBZLQvDBQSzH/xFBjsz90n4Xy3abwCKwEGui\nTUdeLAlBufcSApMfdfKknkxfwz4Ab7It3h3OQjnwCiYsEAQcj555eLkjpSbw\nmpQFL7qr1ID45UsrRnWNsSf4U0W3b2BQdnB9/RXr4oBQplDHZ2IT1hj8bsk/\nBmMLYbg45hn3LGSTdUN4ucPpYZj9XdJ9TNIpzvY1QrIQdgenHLI2vwv7VYFB\nRpMewrcUIAuDjOF6/RsXJc+tQn+agTxQnBjd6lLJnD8Pk9PAImz2afbhDEl5\nFmlxQv3h5oUAvBxhDCv2Thxuy9b1/KQeGzB5ILf/kFe1RB4Mq7Dn4xOGOoRx\nCcW2Isgsb4a4WjyxkNPrPbdwB4MOurRDyZzu4Swtk6qaAo0l3zZTa8aBITWf\nqPXA\r\n=Hq80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb/0DlBKOrLTTpVuOr2W62kEeTDbsSDi2E7BfOY6afrwIgU/+OKbLjlcqP29wjgfC6ionVi5Av9RYBr+M7N7TL+VM="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.20_1575896114696_0.15278812767440053"},"_hasShrinkwrap":false},"5.3.0-beta.21":{"name":"@storybook/addon-info","version":"5.3.0-beta.21","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.21","@storybook/client-logger":"5.3.0-beta.21","@storybook/components":"5.3.0-beta.21","@storybook/theming":"5.3.0-beta.21","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b4332a39eeada108caba2e8f6f7f6b4391ba5733","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.21","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-rNfR36qxDWWkOhkRWOT/tC47VE3xGxguQljoWnUbLBFumfvE3kA02Kec5z2EA8obqXsqkr4V3kl4KYD/xeesWg==","shasum":"9a27ace067dfc9ac135876314dc80eb1ad524be3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.21.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd781TCRA9TVsSAnZWagAAyFkQAIbM1dd9gUeIUTwC0Tv0\nMF5Qiw+/oUaS3Aqlt8p3+kTHIBM+IdpIhB1CEwhFeDcdhfwHzBIjF9phvgMT\nGd2P3xsH+f7B1ckmiJ2F4tsZRwbFS3A5lI4AqivoU+jPpUFib02+s5CU2kqx\na3q5QCiSy37iP4lqav82osDs7VMqOLALzAT8VeHrvD4tuNqO89FmCDDb+Ie9\nvrCQJFv7tIeHDy6IfZj8ly0wCGgdmn+N49jWIDow/jezquuVXxqz1snnpt/S\nRNvQVbsxRkadP+UIA/dMFYf78DuPHoaxez/TL9OZ/hb/UH1xzm1g5B8halWs\nfYZGuzZScTBT8kluDPh3JHExhtf4McA5dYvSJ+toKjr0AC6O4bj4dvw/IOts\n7/JnbBbq3DZxpX74L2+E7/DUvqj5B4o7o4uPMKb8H1nk2FOhL77z71haraCN\n3RjHXG9ihG2bmNaDsS58uwuxQbiVB3NXbfINPdjohfURMT/cWgu4dQRjX+Ht\n08PV7FFasrM7nRCZW0lU7YpTr60TKjefualIT6ZiOBJB6WwK5ShB49R/KHBv\nClqQI3gov246b6ly46f601LYdlqWoEHu2Icuj/IAMr6N2icQO3SBLOXyJV1E\nw4VlBcl07rHWVZYVNEPEYGEFLcxtMxRHPIs3Fc39iK/VoFaZ5NtSagRSv/sZ\ne3Rb\r\n=sc7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyDuhn2c8u/RbfJOH9PrYqLLP5M1OHbsuoIF66TdKLXAiBfpH4M4vX0KwrHctQ4veW/23GO+vB9yNL98kpVYfJmWw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.21_1575996755301_0.8349981684303263"},"_hasShrinkwrap":false},"5.3.0-beta.22":{"name":"@storybook/addon-info","version":"5.3.0-beta.22","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.22","@storybook/client-logger":"5.3.0-beta.22","@storybook/components":"5.3.0-beta.22","@storybook/theming":"5.3.0-beta.22","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"cb706f32ab672669ab9ab8766fbaa9775c3de07b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.22","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-xqkzM/dK8K/F6lYvFommuvcRyVqdtyfZTM/C473hbWh35XveGUdURaYGLZRkwc0Ph2OzNIJATqEyngp6cDfJlw==","shasum":"7dd187245da36b4322a6ac184fd7e69067e7768e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.22.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8lyeCRA9TVsSAnZWagAArTMP/iQqo27Rs1hfSrc2QppI\ncQ7hFo01qwdPC+5GCgnTj9sGj9TJVsP6tzy+KKpJ3iRHZn/mgouP/lEmtnmt\nM8bmmH79nbHBROVFpqWSx0jCOe5xaz5Ylg68GUEmGhB1s1Sx5TnrlUEWZfvn\n41IRp2YwKcCqWetE+IVL6bPtAby8dITdnwFAc9p2mcLAWQzv5JMdUG3YuP90\nFFRynL7Zo7i0RGmFgbS/7/JRjUuN7/QOjL6jGGlocT6uQih0HVTXHx9D6iqG\noV2fw1iqsOV5SCnhw7fPug76NUsNWNEOLp6++nNMymWyuGdEXjrIWEdsA06I\nCaBvlIr3wB8oAgKldUR4+2WqhKRxKC8Db6oErhFPZYpN07iox0THaN/EbE9d\nRxJPM9ptqngpm06WaBeCc0zO/Jd/ZertIzeYWQoA9UIet14wEcTFD6sXqtOr\nwzXu5dFMut052DYhu5941NPjABRN4lmXrWEV7SMcS+TjuiQOZwW5PpKrBM0z\nbLmIVwFOjyF+LI5DTygSiwTrrtXBuGse+P+jz85PKO1sUPf86ax0YyO1A5QJ\nnR6z+PyiYROwJ0y5GGWg8Y4Dmn59aZUmYdTqVlkYWns6OyeoHbRDOUmZvi0X\nGV1thTCJsHWIFMHTxtTIGUD571BeaGU6j2NEm6p33xdysO0JIhkei15GwMRh\n9D7J\r\n=AjNw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChNnhY+3o1Z+axUkwpgf63rMw4qwV315O+YtxevHLR8gIgO/Z47alE3J6lVB933xUEsKCuU6x/sUNMNQ0SqQ26Szo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.22_1576164509875_0.29187193749593376"},"_hasShrinkwrap":false},"5.3.0-beta.23":{"name":"@storybook/addon-info","version":"5.3.0-beta.23","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.23","@storybook/client-logger":"5.3.0-beta.23","@storybook/components":"5.3.0-beta.23","@storybook/theming":"5.3.0-beta.23","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e15eddb8874f11bd239a890a327bf999c9c8e61a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.23","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-twrh4QZ2F44wpID1wUYFl9sn6Y3xf9SOy5YZ2I1T1u6oX4vrgnwWFqerYOUmUgOO9iAg59c7UzZvma3Joij11w==","shasum":"1a38f0a9c26e48d3765fc391b2e37bbf0bcefa59","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.23.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9O39CRA9TVsSAnZWagAAAEcP/2W9HoAKPLlCfZ8Bw1DQ\nM9QV+pqvyrgVSkKfEy5WMy3IIXmn3iEVGUroOGHvQWsF1SaEKpD/NheyEEmY\nVVIg8+CwrITuSyeAfOCgchn8PfsWYYtYm6ZKJJ5YcBm2FzRyakbUdsV+kYW8\ns+HS+y2hitV7OCyshIh46E/zpUyDHx+bC/6Cjb3JcsVZ/d5gtueUZbmzDhZr\n2W8lDMum4ct3tgHnWujmL+q2jm82wvroPHocKdVDHVftxXpRZellp0/ZPM5b\n3R5MsMO1zjfB2DINYjx9rjWvl95drQBEYuGsCLLx43f/QjYCo5+WH3w0xdDf\n79FzlqQmQHZ+eAcIKb6XqtebocDNjIYuFZQlRLqmhfcvASAPOzTYdiDCZoW/\no8V+mCk2697cN31jbl2zmB8BiJX+6YLrc1bbcfvYSmjtTw+X/ZKeZtdaILXO\nXzxtsg6xaN/treSFVgKFfmaDLCsJmcu9kbErG+mvIPcecPX8VMCqNSEZgCBF\nydT6sSK2UyXmMAh/ykC15Bhpo5j2R+zZour1p1+MwfJ0ckFcjb61gp/Fx+Y9\nY9O8Ck3IR1MTn3oS6PN7U4WJKzJARUGg0vqZl/da0Lk3JooWNP+FnwPiL7eW\nZahFoAzn+Hyyb3c8c39fte/kP2ogDbRLDdS4UZBmF4XqMEO8Q4WL2dtNsae8\nIxRH\r\n=c+lg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnube5eCWT5gylAGSJTL+ZUoUYPM7WBYKEupZcLfpAjAiBvDEyMz99ex//wrxXlBqxoJIk0DuTcZgDj8ApTcg3d5g=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.23_1576332797239_0.1931429939239444"},"_hasShrinkwrap":false},"5.3.0-beta.25":{"name":"@storybook/addon-info","version":"5.3.0-beta.25","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.25","@storybook/client-logger":"5.3.0-beta.25","@storybook/components":"5.3.0-beta.25","@storybook/theming":"5.3.0-beta.25","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c84bb43e8723c4422f2967e5a4033f495cea11ef","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.25","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-EbedEGMOrtG1a1DQJf+nNIW4j9tsLcT+Y8juqjh9MsdlxDS1N20iYN7YTq12sXXIgKZ66wa5jMKlJ0QmNctp5Q==","shasum":"c2e2e8686c834801b8fb41adbd5293d639378e9d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.25.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9gcnCRA9TVsSAnZWagAAbggP/3mRGaL72N4FPLMak2D7\nHr4V5B4/XOB85UtEe1sHNAsafv7VssiY8MIurARNAANCwDloAu6BKEH+CoO0\nulZDGy2bNhiRZ0SR6gkl6OMDFFA1YLvxh12ZePAfTfYUpHH9m9Rk+gkgYHEb\nJxfanIrvFTxTmL0qEcz1KhMzws/AnViitBDm59Z0OyO9KyLiYf0BxJy7ZqTP\nJGfDe/kzPZ0ho3VF2sss2Hj+5XhP8v8PlYKGhUEierMX8YtMfqYgCYdxdPgD\nLfoIBHMDmN7TrM43T4q9hNXw2ao9ITuTsqjKTCKnsvi3BcHEFP/D2F2BATYD\nqJzxBbUl55jAMbXuiDqNYPzNK0+uABwvyESEx7EkaBuyMCAZPzD1Giigf0Py\nNUsPnWUJH4DFzJlwciYru9nWU/apjGlV/FzuJh6mTMHTzdfcrcns5cLYOsml\nYP7Q2MeUb4NiRWjD56ZidAMoAhqXtFS0Jcs3Gi7STzA7m2IsSK9nNTrpXmnt\nnk97PxU5HcwdSCH0zAVCdkGNK4RmmwcZtNVsCaiceLHrMr5eu3ZnN/kc2OJs\nqCxxSLmqVL45gjsogo2VrJKK5YMxN5L4Z6bJbIyTmBritBSzhq2IVhyztfRA\nyVHexaCmbSxq5yLw1JpTrNUzL35HExvtq7O6iHCkZl7s400Gjls/1wdWxetW\nqDQq\r\n=RekK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2ulfRihywXiuxrk1+v7Z+bjcB/kyr2XpQTsTQ3JWcKAiAmem8QZ5m2aQdr3jbTUqtqKeMx2RMXZt5J9Gti1jI7vQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.25_1576404774879_0.6761137366278247"},"_hasShrinkwrap":false},"5.3.0-beta.26":{"name":"@storybook/addon-info","version":"5.3.0-beta.26","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.26","@storybook/client-logger":"5.3.0-beta.26","@storybook/components":"5.3.0-beta.26","@storybook/theming":"5.3.0-beta.26","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d6a13a22877f8f4e9fe136ef5dcdd9c075537c15","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.26","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-pk0lG5HI4KrwSi7gLhtEHIW2C9wImihx9ugJmfpr5LTEqHm1rH5iOeUaYkp0oMGsuf0s2Usis9V+7fqLs+lo4g==","shasum":"ac10ae940b21af372d6c28bdfb42c742cd1497d9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.26.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9v+QCRA9TVsSAnZWagAAjGIP/1EC4BzeTRa7PcgxuV+C\n0l3xqvC378+bdBo+Tko89403C9jrBfLGqaHzfBvDvD+Xakpn7QOQ6zmA0FHc\nfoCMWA2vZ0QeT3fR5wNATy2KDuswR7oWNXdkgVnV/3yQfCxVL28YsgVfRXXn\nf/pqMr7rITGzCXKiAstdHqS0qn75ttua9SoQA+CfOr4y3RsmmBfXXhs7ALxF\ntg4EbeyhcCnbkN82oUbjgEf9Po+cme04UKCNcfJM4bRUbHGd2Ar6nQCDUp8H\n+8S1U28ttHJYbMlBRGiAKa1+n+bXIKigZyNOggvRuFz06MXajj7zX6Uu21Au\nBD9dpR4vyXZ6XHKGj46UUzUYxs12t3JuxZ4WvKPwMPFd8OrZtbNf4iabOk8b\nDAGD0f/p9lanxEZsmMHrBC1Eko7OlT3lw6vW79MNdYMRFkAICzMWokihVXVp\nKkxTqZr5baCtNN5vmb4Hld3v/EPtW1I1uaUUWe3V6J12Ut2Yvn1wokVVjwXC\nJP5qNPSvTiTNyK6ECGymucegusYswfDGrHZQ2bT6bGGanlREo8/9RkD+jcyO\nzJtSt1/KANBunc7cqqjdq/I/D3L8zvg+njcHWQ+1g2vFlOcv/1vYMmpXBxLO\n8LwOjvs0e20gYPw/kWmW6yIC0gMDtR4KtXvICnCBpl7Jh0JS8tYhDjkFneZj\nUe0D\r\n=86ZK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF26aSYcbyZTqUtjYD1pMkNu+lgeUSZcP2wuBOunYyJOAiEA1q4QjgZaLBtRU1sETaNixo9e7U7UgwBc1hDMMnX3bL0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.26_1576468367959_0.2627063009530959"},"_hasShrinkwrap":false},"5.3.0-beta.27":{"name":"@storybook/addon-info","version":"5.3.0-beta.27","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.27","@storybook/client-logger":"5.3.0-beta.27","@storybook/components":"5.3.0-beta.27","@storybook/theming":"5.3.0-beta.27","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ec095b015e45fccbaee4236f8936c2823edc5649","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.27","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-MDNXYMtVCQEpBWEKJE1ZpJTZX+Q4KjTvj69o1CgN9H7CBB6y+NVd3jHTNXf/+nBqpn0ugDmrs5yMTUJtdiH5Ow==","shasum":"0822ac6056e60cca61b202a386588aba4218ca42","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.27.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9wQnCRA9TVsSAnZWagAAjBwP/ifDPsqoSQv+suybDXqO\n00re5eXDbs0TwatNLQQzdQvoVg2tUjVqhO0H+iinUTGSb0ps67zacvW4Pg7F\nhmyZh6XeLLgLUYDrtbFFUOpo5cxX631lJeHmOgVF8PQceadCJaXdRVlYOjdv\nWTKU6XE8eLjChR8EcfX4Ow7yZzBXljRl/DMeXSbi/fEgh4bZ74NluOA20BVG\nCfjvqKSm96uYMB7tufGyb3WozzOvfjXdF78mBzPBbr0e0tA77bodPQCqje94\nBFeGzqhwFjS+gD1I6JDfLPhlHK6cfHjNL4lIJIv/nuyorV002lpVFpR6N3y2\n/GLMkCRG0pimfJAFHaPsolGkm+bZuYEhd41bSOppmNuxvF6UiEmlIrJrA3mn\nf73S0rUMn4Hj1LEYgx+nK3lxP915ztOKCQiTQTarphbKa7yv6+aWuEPV8XTL\nbdlX6Dc2GwRtLoePDoFNQWiip2Pn7AAAPbcize3s96N83tHOPNbSoPMaMKz4\nfugZehCL2fPWnj1h0AJuF0pw2jX8SGRRbMz1JiALGbilKCjSwjbVMoiWzHod\nTUnftXfaenipqDq992jiXk1OoL1HQuYZBmUx0FJKte7Y2ZTJ+oKD7czrPryj\n1kjtdMy3ieu8d2IbTxgsX8CLiKx981XRsabFx7+3PyrTsI9PrqIjortAfwbq\n5GQw\r\n=KlGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB97VzAG4Xk3Pfyv5lZ25pKwaH8AYZ0fJzJmT5PdZLVaAiBXPyp2Snnh5cx5RhTn2iWd37nT2laU94EwJ9zM/wJSgQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.27_1576469542547_0.06767247336720406"},"_hasShrinkwrap":false},"5.3.0-beta.28":{"name":"@storybook/addon-info","version":"5.3.0-beta.28","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.28","@storybook/client-logger":"5.3.0-beta.28","@storybook/components":"5.3.0-beta.28","@storybook/theming":"5.3.0-beta.28","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5666c2c62bbf417c1f13eb3b45ad4b1dc7bf345b","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.28","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-jAA27l2lZAonizf915MDrfxScNpTeE6fXwjOO4aAstWA/a0ZSsz5iEfUA3GGBRhREKWWYqa+7u9B90CFtMZ3SA==","shasum":"7a30b22ac32d46c431711add3905313ad05eb6c3","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.28.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9xOtCRA9TVsSAnZWagAAXpMP+wZLVI2TV2I3oEBneQgb\nrZBAHaeywBIpdytaIiLSjAGpPBS1RHSN/lqDGs+G/ESFBzFBgO95+WTpYz1k\nK9a9YL3HJhSOEPIXyNnpXYhYbaAbkY3gdl3eAaLKrJfK2dpiSoqks3566Npe\nQQMMNrPyBb88jko8BvJZqalhaTyGDqAxuuf+qkTIkdrzWYo5x7xYSCgKUpvZ\nvcm5Xr7lJd33kyE2XPBMWxeDM4w5oWHzT7W7zSFykBRg9uYdsuiy/A20Giqj\nKrBmhuiDS4lMQ4BNeCFR8FBgpzYzM6KmX19IYABqMmyIqPtZarhhCXZgtDXw\nkXEiNE37p0HIJx0OOsKqqdzk1biRB1HVvYzjnd8TTfIWd6x5GZWONTeaP8WF\nkJ4wbmMsLowVZ1TrNnHm+MLPx6GzGAS9nImWkSmi9i4UfjT0aG4m7iOIPB4w\nWwmQahfQSRKfG+eGX2VQJvFsvi/6kBCO2g03LDpM66jDqOANEB3TtIIUy5OL\nqSAP9vCw4fKIVsgUFE9XfVppMd4I68V9O4r01dWmX/yf/njKegNkRFYhCkDw\nxIgp+OXChhcpRzU/x5LpOK43SMUatX768UXVEEbXfC3cBD+VXQYeF1DErcKe\n6rXwusfufTd1/91YrlNwbCTNH6Z7gm96e3OuEl4f4jTXJ2T/5iTbnybOB0Pu\nG3LZ\r\n=O0a3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDapj7iJJbHL/5lvXWLbUQZCYjuB19wXjxp1w36xKSWUAiAhCgVX83IPiKNsboI69qdom91d4LZx1tqLdVl1vmKs7Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.28_1576473517185_0.7906031090465495"},"_hasShrinkwrap":false},"5.3.0-beta.29":{"name":"@storybook/addon-info","version":"5.3.0-beta.29","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.29","@storybook/client-logger":"5.3.0-beta.29","@storybook/components":"5.3.0-beta.29","@storybook/theming":"5.3.0-beta.29","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0eb3cff488dbdd83161dae188cac4c867725b8f0","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.29","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-ImfQrMIDlBv49k2+FP1I33bkQlFGS0T6JIXTS17F0OP8Sv5TK1kP0pYM0EvkGn983TO9CVF5eSrdBSCze4S+3Q==","shasum":"a154cb9e29e2005fd5c60ec2ef67d8127e106248","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.29.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9yjlCRA9TVsSAnZWagAA0PoP/jbvb6pjmyJplF6KEP1H\n3aaC6DlmtSMVzRPyhPLm8TTHVGfZqJSJyJxDRgsGnI4PkUtgjuI3COqoJSmS\n0LwlkMxBN55/JWxyaP1tQ9e382w4lt44/5VEOsuCnP7H5SmM2IR3yWQjKSKf\nGtIUD25Yieo800EDH2byOyP0x5cCnRk5pteXAoa+NMQyEDxPwKdIT9C9Y/wy\nqapb95mA86cdpf+YSylT0AcNoSPVgubg5tFHb6cqYLGIouVHt1NBjSFYAtCJ\n4i8SGG2OTo/4A+QUd3w8mwaD50jj63kqMfcXqtswyDyqsncpITs9aXUipiiX\nLZ9hlgbEH0jP8eHKU3HVxl48BaZjtj3cefuijJCB7KkFAmt5DPWE3XWu63ji\nH1SLE36OYNb8H2T+HEEv8suLIdPksy84WmWKXiGolWMgcx8d+rfGdvXL0+0I\nLGKZ/lSau87A95RaU58qZs1t3tS/A8XaZxNpwKdoiY76tcyslcK6Cc34XYpO\nCey/fKhSmyUtZEURgcqq/vkUGinMrPQQ3Y1APzhx/0tXQUolApdG5MF9p47j\nOY/IjkX91GYb9ITr66nF0BGnqUevLn/aTzOnLf2IuZF+zfysYwZEQPDb9lHi\n6qwetVj3Onq/wKfctfaEMyhb8AKT/PzCFjI9VcVWUHq1+rgPF2Fz+7oob0ry\nI/ag\r\n=/XQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/F832lH7bllkvcakUQ+BS+q6gL7+TY9lTMhPiGa62QwIgCC21dl84GF1VcMLS9PpV/DlieBcEJ1AyZj4nzAST0mI="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.29_1576478949383_0.40724889830901856"},"_hasShrinkwrap":false},"5.3.0-beta.30":{"name":"@storybook/addon-info","version":"5.3.0-beta.30","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.30","@storybook/client-logger":"5.3.0-beta.30","@storybook/components":"5.3.0-beta.30","@storybook/theming":"5.3.0-beta.30","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"52147410f243d401b27c9b9f8b56afd199c4504c","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.30","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-F2xZtn65dfF0nnIdvaolomNKHyeYt1vyexRGzJOrdNQPkw2WUU7IUf2wGNCYbSbNrPRmcU12aaDnErp1jPR/qw==","shasum":"c54f6cb8393b824225d964a6964824ddf3a1961d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.30.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd91FuCRA9TVsSAnZWagAA3yoP/1eAZXgkoBn26zIPVeOm\nH2bvJXjI3VY/5zacK3feK+Nn+8+QTMTJ35qj1CMRm+T6wnvdQY5u25s/AV/g\nlin3DhbJSCgkPCq6MUpIV1isLI/UQT9rGJaxGyhUi2QDt4JZSRystAzkb3O3\nVqgtcDGiaJz9C+hvEYmutI0ALKDJgFp3jQMF9BY/xxRKP6+Fr3t3btiyslXU\n4bRuA4Uizw3wWFRoyP8LanLmgVLPF8hxyn437fSPBk4ihU1tHBqrwFL3y1Hr\nGF7sKeXlebmK4OH219pwzRRN+Bfi5qpXnGfJwbnMNESFQ2aZhoR5F8NXhUpj\nBkduPIDMPqqlt0pAXZphmF0YNbZnCqjIAIk30JkkQv3SBr2/9HhlVR9FcF8N\nlhpEflffGTAkJZJwydgepjEoCoAUiVqeMuawsk69jx6uoxOrfm0Ep0X9Ky9q\nrxKxs6VFDcwZTqoyfpUmu+df9KEiezhoK0/ARzOrEH1jEDxc62hDBMBBgc2z\n9vTjNT0HNY6FKBWi3tXaclfZbDMkHJzz+w8gFWNOkXwP3XyYXVd2QIzCnMsY\nffmZYxQVGfKTbF/hqOEqHPdwdgEnK1GuMv/MYFo5ehKFQ04xyawLut8zv54W\n0NygIeTui9Q7Rk4v0tzdtmc81c95FVSt5kjsKwSbt/2P7e3BE38ghswPh157\nuwmw\r\n=XaR7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWUSD/lttriVaI93WwwlWts+UVxAEfpnyndmiept8xIgIhAKIrFOG4oH9hxyb44JQ1NoHeB0lVExYTIiuMoM8jmq34"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.30_1576489326390_0.0379620628654449"},"_hasShrinkwrap":false},"5.3.0-beta.31":{"name":"@storybook/addon-info","version":"5.3.0-beta.31","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-beta.31","@storybook/client-logger":"5.3.0-beta.31","@storybook/components":"5.3.0-beta.31","@storybook/theming":"5.3.0-beta.31","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"4d2d0bbb2dcfeab6d790c9fa4ab37de0b23435e8","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-beta.31","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-zD1e11iuBbyPi9MouXWbEM4gHcmWMgpRrFbEVwpAv8OE0U2VDYgLefruVIjMi6mOmbfzDfSPr/LT2c2YwGAxKQ==","shasum":"649f4ee44f90582532aba48f7619ec3115475fe0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-beta.31.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd94SdCRA9TVsSAnZWagAA/OQP/26Ma5pS4w7urNGHdkor\ncJcpggncgWZwkdu6WiDpZNuEdCTZwvEjan/eN6OXnZPFxvXmNn7XjvL0XebE\ntf65qps+6FxfW1q35t2+3yqNPAFk9DsY7fWbHxYW/0vbsoTbNGN0JVQWT0Ae\ntjHdaJpg+3qKXdzrKjLzI8TpBMiTT8AAQ9CKPPjAmCFGoJSP56Gtu7J7afj3\nSfV7YGt3GjO3Ju70U3l4GGoeRm+Lbz0E417pA2zi7ZeIV/AauTs832UQCiwj\n6SjG/zoTPvZevA4OXySGJYu00BnlFn7pHiU5M9HNOnCuGinYUuM0qu5FkzQK\nCFGmGQN2G7mpuaUZTtCT0XEOX9Woc6cclXyDUtec98Peaq9AgB2eXOGQpysD\n42jGZOgpVXjYXpAwaa/TVmWq810zM2+3ZbcuZdoFj2EOaYC3gy7BnRpYR+C/\nZiEGGtrZ1Glkt0GwDSSGVLrvWEJFWsATIIA15Rmu3zW0fGKKg+SHAr2RF+ro\n8DVNnUMU31tPv1BfqYRX//5/Pt9Gxn9uExET8t/DyZFP03yLRxfNDITToC0w\nT96hdRQuxO+Oo2kwkhEPyBM9fO+z8rGsyZga9ataDNHJCJZEZX+yhX1Qlox/\nf+vrYnyWND0iuiECX+FEtSyniY4BtmqgjJB/+esBOD55WYmvRs3Gn+txBMh9\nmy/+\r\n=R8X5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBDl0z39QXLe8fzaiyCuH44l16CoQk1z7uDl/Y6LNcwQIhAK0nNNq7RZncQZdGDlEP60RN9ug0y7nlLR2nj5xXTesl"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-beta.31_1576502428974_0.29657773961268963"},"_hasShrinkwrap":false},"5.3.0-rc.0":{"name":"@storybook/addon-info","version":"5.3.0-rc.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.0","@storybook/client-logger":"5.3.0-rc.0","@storybook/components":"5.3.0-rc.0","@storybook/theming":"5.3.0-rc.0","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"7acb51d15ddc748b464394a8cd63f018bf96b527","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-m2gpRbCdu+cbmNh96pBndlCjcxo7meewRHeITyjfUsIRMoQAe6SKrKHqOhJll6JRZ7i8thBg8QfktaMkq2tupA==","shasum":"7ab4ff1c931b5a40c5d9b62849990779b6fbea29","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.0.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ztFCRA9TVsSAnZWagAARx4P/1/UYahL9oSrWrl1xVds\nB99ziNd+gDF3uw7q7WpQFu4103F57cS67RlMTNbLUNLbkYEsXiX2Pb0tD8sx\nCmFNX/JdxW5M/IW2xqohXtppRkilLIKVmRejqKbWNZEGZWfYIV5DxrzAn6wj\nJ3nlTPpDb1wftt7jvPXvvQ4nQjF7MUvdCq/GNl7sMWjEktlprRvGTXGNwmXl\nzLRGGzqehi0SEHT3oh6+Xleu4LLYz35T4YjsWN/awIooceUeP/aRg4Bg6q64\nzTW/f0SJhm4IuIMRMJWfaS6ghhinAgHbZ8rTDx4Fk0CC7OLKa6Bg1wZfed0d\nPTFSubKQazC4Kuo7j2ss7ujgmMAjsyQXh5mnOqbXSZFLmtMy2d3bhl0x9Ltd\nRC4C9DIdwcoiynzN5KEKDavGXs7v7fR/ZY5uFDE2PdzPwOq+uddWYqth7Pu+\njWlLuGmDmOxV5dQr84lhhUqUyn42MOJeRh4N6FvYZ8oIZQFfWhk4YMKnxf2E\noqaI5dkUwrSUCS0GYNxb7QKVXvi5GxVoUCSz10WXpks5El6GXIJcWc/XDwqK\nCEw560/O+US+rdhWZNlj2y0OxctzhMcOGJdqGhb8GIAOWyEPLQGjNSWmrNjU\nwlkphL25JK6dYLwEIxTgsK6SOnL67+1e7jJbjmtOel61f4fGepSfXxK4AIaZ\nh2ot\r\n=1hNv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8S9bpp/Z4g0/ac+EfZ8F72b/NGN73qviXzw/7/q36WAiEA4T82QNmsV2GUrlr5tV1g0xYPpJNM1E2YHkID97UQZQw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.0_1576745796716_0.9489907626720762"},"_hasShrinkwrap":false},"5.3.0-rc.1":{"name":"@storybook/addon-info","version":"5.3.0-rc.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.1","@storybook/client-logger":"5.3.0-rc.1","@storybook/components":"5.3.0-rc.1","@storybook/theming":"5.3.0-rc.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^7.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"c64a498a62180619dccf905a25346cc3e00247af","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.1","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-yQy96E+9U7wU8LmL14a0bfPzE4jT/MPZx7Zk+YncupYhp3mdUCgJU6PsrmKX1os85EGalmIl8kuc4NBPAV8PCQ==","shasum":"f74d1fdfa1f9bf47c56df631b2e00921d9322720","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.1.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeAIesCRA9TVsSAnZWagAAvXYP/Amd1T7ZS/HoPuHTA0Bb\nHlhUMXwSFW9llGFY/GcF+iQUgC4R8mS5Br6CoUXj+WvMWV542OI/ztznUk5e\nl4DNeC0vgmSnzKYfV2it+VitOOmzXwOtuPalIVoN9rY71GwijjZg1ebaYxNt\nzXs4e+gfP6iyo9ZqVhzhcQXMYGl99RjSr/gtdoASqMCZi3OE8DB2tPDH/xLP\n4wpq9OQk7Perb9E2Wq2zjXXR4mW/fsifkPuIZrcstb5dDVSGAJuVaUi3875d\nLXBqljnnHPC4z7vA+ZepetZsnKn2on8hNtOOWMJa5VmmUO8epa5mN/fZPEoB\nVGYTZWQwuZ3Yrna2YwUVWR2vxMOJ/1mX/q9Pw64c94TBgaqEYRKTJe7KYh1c\n7TCiA6ZINQ8fOqmMKQfOlx4T5eUlQNcckwUgYRWQu6idEUEnjpFIgzlpc5ps\neUH/XrtKTLF35x0kalYfVZtsHZq7y6d/skrh2WD0N74EPGHFSw36wlcdTcGI\nShPNZPFTmVNEL86qPT6d7Sc6syNc4ypta3EoLaFIpj8LlhzlkCoqUcCt+RFp\ndDsDZB38ye6KCdDEtplK2/5g9u7es3zUvc6cdEvbmUyeD+klMg9MXtAAvhCC\nb5RGBAOcxTTaaT6rHI+ifZcsMdQourPMPONXaUP+y72VI0CTGe/s1CsIhsWk\nx/ip\r\n=F+yx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAbONKeKR/x1Lp0Ha9woswlldcwdqD48exnXmB6U2YBAiEA0G+e6QKwk8jLwfyLK1uVnfZgFauBPzVCFc716+zJd4I="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.1_1577093036561_0.4965215225748376"},"_hasShrinkwrap":false},"5.3.0-rc.3":{"name":"@storybook/addon-info","version":"5.3.0-rc.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.3","@storybook/client-logger":"5.3.0-rc.3","@storybook/components":"5.3.0-rc.3","@storybook/theming":"5.3.0-rc.3","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"9c5005e16cf7b0acf1b36acf3e783d3ccddc0953","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.3","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-xFBl1u9IQt2WBzr37brc7XESi3a/L/ByyAwSM5LI/+EAVrdgAG20Tq4R3/EYfonlTWw9p+4e9XDabw4BW0CXJQ==","shasum":"bebabb69cdb357ade0e492c490c1a76a4d2e474e","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.3.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBKPeCRA9TVsSAnZWagAAQhgP/iAi0AZOsXkzp4WSGnsj\njDf1yLy95F69MDSbaV1Tvt+ri8WLlLV3e4vqLcyRlTHaDIj8vxN7S6X1uBzY\nhm6FTccz7nALnu1QfzZwZY4fQ0LnhuyqyRzAIFenuLM63XtyOY9AdvrUCVLX\nVSN7SUNmEgERZEn0PMFrS1/m3NvKJ0EdYcSNJdu4N96qhPEHKVy1xvDm9s+H\n9Lhfr0tcYuG3gSL2g7UAH9vEN1xR7+WIyVS5kspU/VfNBUBDJcKv+L06c47u\nzXZif7AxVlSbhL6HJSHPeFGNYH9xreDCcf3Elz+T2YQ7RyH7yLtzHg5+i05p\nuFpw89e6RWnp6x84GIzglbOanHr0J2smjdysm+aiT+RK4JM/qCKYVy5p5G6F\nncn7Tmz8yFBiwJBA16azcmpXOeCeDYOky3YurodU1JNKCRWVCn6+317OJbsn\nEw+iq5OA8ethv949QNsV+M8A8aCn2dWJxOqVaeGpRRUZp8yBIGfMBalnQ6VQ\nAXFsn3eHpOI4ifZvWAceRCUk4qKgXIhU8C5lGKs3kyV09uqIX48ifmkziZej\nYiqPi9G+iQlx1KOEjk7uc/MlteeBAR+xoUm9q7UiGPB2F9PDI0EBaYHkXi7I\nvgN4jbYNR2yLZ59aC27EzDFapogrLJLRNFG1aafLoX2ZfrSywDX+SWH1TUHh\nNJ+g\r\n=Inyd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQkkVQN7dZL8/5O0gSo+MKpVFkzh6Q5xC7XizDKzZc3AiEA/hG0bBJYLHwKfWGjywKxo78w8CL5M1J4PJe4vRSVpGE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.3_1577362398475_0.966746786672321"},"_hasShrinkwrap":false},"5.3.0-rc.4":{"name":"@storybook/addon-info","version":"5.3.0-rc.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.4","@storybook/client-logger":"5.3.0-rc.4","@storybook/components":"5.3.0-rc.4","@storybook/theming":"5.3.0-rc.4","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"1681a28c83f7f5644103e3204a3d6d669dfb821a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.4","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-P0LYflImuyIM2MraGHcpOKjJSBjedx+CEOC367PH9TFoF3HWWVM3wHdpcZnN/PNxDKAgM8fiwabP41m1OUyqgQ==","shasum":"62375724af438ca3c8c92b970131e35ddea26c93","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.4.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeB1SeCRA9TVsSAnZWagAAfY0P/jyJigtgO20/yagNd9b/\npUUFnPCkEiqNpPvgXePri87CNfMo6z/UCxpNd4F2s6guYGW3iLZzxCf3RwUv\nUzXyHLKrXAmQKW/qES8KB/Ius0LxEGXT3jEI7I3D9dZfr2S/Y7qzdPgYxYGn\nPmTkMZ7XkqsQm6uT4IC5MFfTYSUvRM09JwM431CPsd18olmhrQ1RQ4wNnsM6\nrTChVKK1P2y4eA6FuF7YUSxgYlDHrVrP6aopsLTb2DZG627M7P3Ku3zUhU+q\nNc3o7Yt3CRtDy8GSWzLHabMYBhf+PqtE0LAVELfGq6LJTYspUi02Kt2Xayot\nVMMCILrc11Vu3/fAhTtb3C0jpAfqHc9IyQMZtRj30vdOrnmoPd/Ah0Wf7tlT\n9MrOQFcWX/2RzLU81mkg6t/9SWrs6beazg3Q7FSW7nTjrECnKFUGpEEC8Djd\nvIFEIPuMnLRH39WUUCdYggynQhfoUmW0W1RPv8HMA9uEjb8JmJXPbYQ0pQZH\ndV1SuES4iKRhKkYjGS4BRfA/2yKLUA3ISKWE6mPgKlJlB7STNKLZv9WMcOiV\nt7y3S1a3A8V1mEUgR7cEmguu/ar/KNxzyF6Q5MzxG86mDeiiiZ4KxjUmHZoj\ngIFv5WGu8DSudFHBYH55Z3EeX46GlPkZwsEV9Runoii10+x7robHU9Cx00se\n0Mem\r\n=f8lK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDsoHZrxx79yp3xYnfsd8MVZkJ5Ct5MzkLPT6dsXBSOAiBk/QpJO1+s38WxD+KUKrPjX3ggeC4Gd2iv3JeYYqsFSg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.4_1577538717791_0.19561542807361576"},"_hasShrinkwrap":false},"5.3.0-rc.5":{"name":"@storybook/addon-info","version":"5.3.0-rc.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.5","@storybook/client-logger":"5.3.0-rc.5","@storybook/components":"5.3.0-rc.5","@storybook/theming":"5.3.0-rc.5","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"49e0ffa81181dc692e5a26c35eb74a4e7da7aad1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.5","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-XijTeHqgtdIWiDR55NH2f8NRbGfiH8fAFbZfyhaCsu7dix9pAeubO507Xmk67y+Vo4OPqrQikj/yJX/F9Yq/zQ==","shasum":"253a1baf6e5925b4f1073191b5bab48b0a39c9b1","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.5.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeClJ5CRA9TVsSAnZWagAAAqYP/jptWbBr1QynDsbNCQKd\nGrOqL7ccXDuGkUxS0XQwCRpX/p60/cmvwuNbI9F7/832hWXHopM9wij0Z7zi\nL1yS+cKeEspDPjXkmofQIv9qlEdavnKFUeB1qsYVg0/VdoJPKr4pUqlyzxyr\nL7XoZDGuCGpg7Ht7W1uohmTcx+Q8SqFbEyyevv7RdKHOPb5ZH0dzrXSEyfAS\nGDTD33V37hsfe/tHAd7u+6xmRWieU2T0kxrwUblDiWiCwEex7ZyE+PkU+hCG\n4JYUuAbIejahc21awKDjq3rW16/Df8xZdDADRCA2Ve2/Z94fe2sf8PrD3WVx\nCipcxEUIGVqwQAApUsNWUEjy2p01To0ylgD+QeA3nsgJov0BUUowLjSMzRsa\nMOXBSzDz7DcbM/brdoLI6l9jegiB3jV6Fa19Bj8c3QqByDABmdU9DZC0h0/k\nfTbc2GdlIvNi0BoOaHBHTh95fi27Zn4wlbc2Ivf+wp/OvvbCGknZLrTqsb6q\nZwTDf0y5pepnpFtI7Lb+TLXnor+9CLO0z0UKKMk6aTqIjnPEJ1X/YGXAQFXl\nJhIEtozCxQlywvcHx4kxL9bk2ZrGH0zdPGoWSMF99rYdzXTn0sunvchi4rto\nT3ayj96x/59VaiWiYOesL8QaZeP/9L8ovbz137a5ARkPPIjmU1yNTN6p1R/3\notpi\r\n=wAPM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpTXbO5+M70TQsHF3cu5R9u2rrcPk6dyWrYwE6s6uhUAiATdh6MDi2lMN8d2U4TYijNvJDM3Ekos8cOWnD/CuvePg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.5_1577734777340_0.9696903097503793"},"_hasShrinkwrap":false},"5.3.0-rc.6":{"name":"@storybook/addon-info","version":"5.3.0-rc.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.6","@storybook/client-logger":"5.3.0-rc.6","@storybook/components":"5.3.0-rc.6","@storybook/theming":"5.3.0-rc.6","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"25f36c6492c7d815aa70d9fb5615712c31019738","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.6","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-eeRtmSVrblkMEgak4NEKXCQM64HxAkjjVaQ154Tzk59mzFEDFk2pqWBjaXhY8/+WmL8ehh+mA+7tmVJ7EnwCfg==","shasum":"275bb00d084d802666c70a065b7e05c3e3fbcd92","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.6.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCwaoCRA9TVsSAnZWagAAEHEP/1JbSEi350VvUCcsgul7\n008n05vCEjo2TM73+Y8xhNhhZaWPODYrjxJugPPylEKyoEFhyWyfvfFlAOGK\nZtOvEoERnpW6Qn7gkPQGWGPZAYxtLxJ0pwNDoiAUm4M/GCJoFEfIen/6Y2qz\nXN6myhOJ3VJQ/dvGqvEVBh+SYTfUvuvoIhCwkxtboMNf62xVEWvABJV9i3iW\njE/8JY0OOYtbpDSjhXkgetyEElLYghCVUieMZgL/57/L0v+36limVjzdHvRx\nRV7yXEDh/GmK8LFmjmpb4PPJ+o3tOr/SEAC8KTwwV68XkiP5oprGQJGbnJL7\nenm8pCJ1ICqH3cfyn128AsxHqx7PkKPYoLwvzgpazniFRiVYInMwuW2qfwJC\nJs4zCMRxoRwAOLp7JbistzKj48W3SA6Iv2jSWWdru2blYUtQKyGctoQtb9iz\naR9qNg1TVs4kqstL3BdbbFGd+jU+/VaD4lUbQvcFpfF+e9t0AwIozsqEKsIV\nIJOsX1zlGCWA9it+DEl+q6Y49Fn9QohPgqM9gkRHuQNd8LwmQiOXX/Ei8zLv\n0izb8g6SBo1Dl2WGat8ypGS1EoRY/L7+RCqpPNKVglBAFzY5AhTCNUxjuLg3\nlMpayMqtTQYqBfhnjZ72+b47NAuAMCNfcak9l2SbAMZnEHax/QRJQ8+f2w8y\n3gjh\r\n=ZMoo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3l4ZiCKGgWfXkE+/X0OQDg52u3yvjSZt7LOF/5w0yeQIhAJlYyjzjlUeEEBWJCm2Kxk1r8NfcuTUEtllr+l+RO/PX"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.6_1577780904416_0.21891359902856178"},"_hasShrinkwrap":false},"5.3.0-rc.7":{"name":"@storybook/addon-info","version":"5.3.0-rc.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.7","@storybook/client-logger":"5.3.0-rc.7","@storybook/components":"5.3.0-rc.7","@storybook/theming":"5.3.0-rc.7","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f54e19061b27204d2b569db1c0cd720eb6a5b25a","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.7","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-qtDuQzpddr+Ui0xf6dNxeaPX56MfcKQ1msTnNEMOVKorqnf3n77qBZs2XnAVQLBQx3emJTP9QfYNIxgXA82Wug==","shasum":"0f11255bc8ea32450a48b7f5b473794d9c7f2da6","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.7.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDV5qCRA9TVsSAnZWagAAMbIP/RCNMbZSU0Dxa2P+B3LU\nNcF45pCROiMZ79lG5yzwi0ZqUpQxsLnS3YEsnqWr1+bQcrPEqgDj6Ki35Sz0\nVyIv5+/AndLY/O4hQKaOcQSCugqSMCuicb1vLNcQdSlGLt7BvMC6ZB3FkeMI\nUC74vsBhsyFkNBNArPiNZ/TBkLW/9lQ81qPxm6Z0aVJ8dwhCHtNee5kj3eFe\nUDeRrL/T8uC1IKecdNd5qDZY41YDGmblH8+FHQ+RMk/n5DEbWhn5zQAgy4lP\nw0ojccUW7SEEtsChYrCPNDxaC0y1Sd1mXLCuny6oglxF0HaRI1nfN6VpvnKK\n9M1VWw9FGrWALP5h77Tj7z+xI2sRi27fJyg+aDpWhb5cJtUMnLv0R74C1reg\nnX13yyF1uoqKDhPc1yBL1aW/t4NmEWecmfgavkG25Bz6eg4sB1hxK+7O6PFk\nlePz1QHmbN0QdQPzLQG55Pi5U2oEHibkEViei7i/5BlkZJmPZZR22VBP46jU\njquTBIGsHcRv/3oqTnFaBnexiy+PTTZyXOCyrYPuRYkUUW2FduOSNPLGR7R9\nncxz0odogzqJ+IeajxeS0Ro6+ONTQ5gr2b0Dyv0Y2BAqPomLIR3gwl3vxBXz\nCJAKsEG+oiDw9YDiJSbV/rGDyT/Rl8eIE0NeGj3ePcTjT5sT92pOiKGKiquy\nEj+z\r\n=nSME\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAW3dmvDa/kbIZWhTM58M4M+SUVD/eGhpoCWPATeSR4cAiBndAE0n92vcN08MpL/EHbe6q1q5FOlQjf1qwXArjG67Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.7_1577934442469_0.177955163806097"},"_hasShrinkwrap":false},"5.3.0-rc.8":{"name":"@storybook/addon-info","version":"5.3.0-rc.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.8","@storybook/client-logger":"5.3.0-rc.8","@storybook/components":"5.3.0-rc.8","@storybook/theming":"5.3.0-rc.8","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"755e90db0fc60592298ee8cd327227fa86dca6b1","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.8","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-lu5DONNHbdXFGCOlB8hMH0j0R0ZIMtPGJjhtPwNA+mtG+bL7/ZOJBPewM3jHjxIgOo85g4u4yDpoFsvJ3vZJNA==","shasum":"db802b9c7bed8bf6edd200fb86796caaebe48168","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.8.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDwCPCRA9TVsSAnZWagAAtUcQAIwKJ5KuLlTDXadxylYg\nsUhP5+UFLjyI1c0wGA5Y4H595S4EczM/+o3//GhbK+elh9+C11NO2T2y2ODj\noNDt4SFaOl/dP2JlRhVNcGx6EC2XF7FJVmVEyQ9SWbWBBpFq/CJ0FDWD66e8\nI32xKt1OaX2DMb7OIQk2ROr7hvTO/488Yf3eCd/Fc5kepfW7Ka7QdPNTmxqN\n5MSbFFOX+RIZr5Z/JZ+EzoU4QkcuqMPiBmMFDCvmRRhMAR3AZC4TcCsLgwiP\nncJjvcA8nMvZ2/BWWphbpbhLTviXmzsPsbJLBthGsr4nad3vtCt6WmtMDywM\nGnVgkQ0F01BYpadGBm46ywaSMq0z5Bhq1dr9YCLir9mBCW3HkEQidWcJcaCQ\nCNlUBnnsoxVX5FFCirwSK9ck7FbVzswGUcvXS7JDfKxYyTUy59gTooRo/57q\nsqm1X2fJ1FmXnA+MAoBEWNeD7CkThlUfYqIdGECJpjcajc77gxzFUAhqUAik\npHRSNMlzHrPtUvBwbVE9RABWqnca19TS8hgxmpjR6ChR2h9GIWsajxGvIWR2\n0mu6xYSVdFN0i/KQe3UPMqAc8SRV3WZuwBMdEuqX4oJm8pwp+LmxiIsskX/a\ncdVQJIyie4c1Uk5kDGCGEl1LLpbnilUDh2w26NUeaSeTa6MWhhVec/jM832T\nbAgo\r\n=gMt6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBvElSXI/BJx+bs94p7azSkM0ZS1XqZlLlxgaiy8P0CgIhAP7H4DZT9UCWTR3tnCSZBv2qjnyP3sYPxZRJf+u4N6pT"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.8_1578041487442_0.789423869247236"},"_hasShrinkwrap":false},"5.3.0-rc.9":{"name":"@storybook/addon-info","version":"5.3.0-rc.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.9","@storybook/client-logger":"5.3.0-rc.9","@storybook/components":"5.3.0-rc.9","@storybook/theming":"5.3.0-rc.9","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"16da56cf90998ec4da7c423dd3868850bbd250c9","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.9","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-KQIgyjEym/DK5MTiyuGAx1+fGF3X93ZtqNp0vGWCp5L0hYVuUIA2LYDaavIULx3qfK8Ms9/+5mkIGAPF9RXHow==","shasum":"0174d7f90393ee61d045b18f36c334cfc0e3e95c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.9.tgz","fileCount":38,"unpackedSize":227445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeEIxiCRA9TVsSAnZWagAAT0IP/2wEdnmFDHmOk4uCDZAx\nr8HrAN0+Av3LFu11dozUd/byd1tCVtyebJWXYyjouyIJj7T575MwGLX+ahhq\nn0hWR/e9+HQfbLI3sdVZpYILBH0s3tZi5v6C59jFJVMhLDNvXpwakZI5n5Oi\nXotR9fnIMSzA+SdAUvkQ9gX+ST66WOTbN6FrFQ/ealxhrbRIj1MmIVi/vMKo\nlP2RQEcrFeSV1iB2gxS83AyqrgMJruktsYggULLiGbTed/hi77V/dKvnRjYU\nEbFBRgN3CEjbvTRuqA2cG8wh3i1TtAfxCliZ83SJVWo8euvkee/kGteu8Qei\nSNF9JNG4hyATiNXNelGqvu3/wUGJOUFaJqdH8aHdpXR+DeXQHtfdc3w07wCw\nVM/+rsc0/kDu0pU2Mlebdi0fpDzt/eUPLJsLeC6AmhdOwdbag5fj65LeUjzK\nqrwbGlZleLMZIPeWYDG7PFgO1TwiK+yraG/PZUu/z9CIjKyeic3E2bSWkM8J\nPTW3ZGXXC3AC2cDN6/ABuSTBW0jwHpigv51hzvrIge+PU6CXHm3EYpLHH31m\nwsjxSp1qjx0MI17kiH1XQ1+FOs9d5tiT0868pVCCudt8hmsHbYiFn/WPMYIK\nqn/yynwyUr2TwEwMrbXgqjKLbbyvIyMtBWhqmqERFRDp9Wtz+J3I372f2/a1\n2qlc\r\n=UoZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIBlgOgiyT7vzjZfQUkmEnIxRzAhMSiIe5AMEr/tPrCQIhAIpzioZl+0YouZ4/fnIt7xGNm/Yn3o6Fgglf1yVlF7PQ"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.9_1578142818330_0.08136520020088378"},"_hasShrinkwrap":false},"5.3.0-rc.10":{"name":"@storybook/addon-info","version":"5.3.0-rc.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.10","@storybook/client-logger":"5.3.0-rc.10","@storybook/components":"5.3.0-rc.10","@storybook/theming":"5.3.0-rc.10","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"70b3a7aa30b5465f11b42f97599144eaf00e6fda","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.10","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-YLkjHYKBzC7VdqrB28pWi6AnrGczUr7Yr5CVtFVZPmm0FqsDyng2ozOaEfd/qbyiJ7vsQ3I3CdZIbN5Qx0E/2w==","shasum":"aa3ebec1a855e9389abae7ca9b6d07ba28ad38af","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.10.tgz","fileCount":38,"unpackedSize":227450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE0V1CRA9TVsSAnZWagAAC8oQAJeqjljDBuq39ODFl5je\nSMClP9OKM+K3JMAcxXnE3Q8w1fbKDhCzjkX9aC6Q1wp8yqgYT+vOQ9/fd66g\nAdJ/lFvEjIdyTrJgg1zcfxPz+VDM/svEBQeZZUcglGADzuweFjJVT/+BDNsU\ndOOiJHj2vLDtG8M/+QZNsBM1CBZH8FwyggK/bfkwMHA10AqWtz9IT6E+HQrB\nG84ixEyvZhSTY82mGnJTdaMam73RECQ7vl6vPZkEcEYVSmmoJoe5anwxdOUK\nw4mJ6Ft9etkWZc/B7UvI/hfS/+9pzuq2PxqIT18Fzf4puSnhaSCJbko1pZLN\nGghtgsgBVquDlOedRaFfTlSqhf4ckLLusxnX9fQUTP8rE73tjcRtxbJV1+uX\njpoxfgFbDSfEkVzmheesDI7kVI64aTjIcL1dtiqAAtBxkrMcXZqM7BekH/Nf\nbUIpd+gncQDjOQJ1Fzw6OQ8RPbxSSoGcMkUC+UCAndN6AaHZGCC+iCvS8kyN\nfOpAvs3CaJAOCoog6Nu8ahAGknxp1qkY3wPkWyRvkP+S+GmWscTaYJZcIiVk\ng8v77acqZLuVMYnkdAhHfDwnT8OAAk5fAyAPRm0kuSqJKRYiBBqFUxKVjNk/\nim73KUH4H3XJ05oR2LMbML+6YXmfTWuRa2Bh5ICxU6rDDrhp6V/I1qpfWyTc\nh8Hv\r\n=JuNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKZu87Hboj0vFk2nFbtFZJs4UlJW2Wj0f0nsT4H1FqIAiASKQ69zhZXAf7e7wsG6X6D+9HRLqoLzi2EGROzLfarAA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.10_1578321268754_0.6331032271496464"},"_hasShrinkwrap":false},"5.3.0-rc.11":{"name":"@storybook/addon-info","version":"5.3.0-rc.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.11","@storybook/client-logger":"5.3.0-rc.11","@storybook/components":"5.3.0-rc.11","@storybook/theming":"5.3.0-rc.11","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a44240e42090742fcb7cfa8e76c53cd8cccbf3fa","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.11","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-iIky8+oskAcU6+f+0orNnm1s6hZ7Ouo7StqUJsjdSakW51Gyl1pOMmTlb3A5VWu9pqWdD9JhKDDng/bO5yOWVA==","shasum":"a0a1d35daa4f3ca5f71fe2f065e909e6ea3b40ad","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.11.tgz","fileCount":38,"unpackedSize":227450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFI8aCRA9TVsSAnZWagAAqP8P/jSY8sqgPWEe+2c7e5ky\nWasunrElLKGQIij4GI4odpc2a/asDsDv/Mjd198rnjlZXQXJ93vUQ70/qjLO\ny00/zHgQQeX0QN0DJ2K5ywl+YyLOVpwibAqLZ1+yHC/NROQhyFZrTSjjH3ZJ\nJDjIV19hBY4lNEOcYibbAKA4HtkewON/6X6PXUwJ679UDvvXo/5Kd/lg5vI+\nHY8wY177E5QpPbMEA4iAFwPThgP72MTuV1PZ054AvwWh+P0gJ2fS896yo5Gr\naf+aMOHmBOznIYRb8GjKiCbIpj4eVHDDzwqvURGe3cCxL8nP7hRq3QGcAwMQ\nk/nY6hq2pkFQ+ZI6+bnID6gAOx7Ur+iSmyG4SYjT7zrMr1PlgL5ZcdYKOzpN\nv9bah2YVWjpPZURFvQPi9JpRCQ0qPdmIh9ca/kYBMLLT2Doc2FgiV9NGZL+1\nokuXeURvM508TPq5rKDKbCJF2XMtOxuD+oXwWCJHcSp2IKgcNUxvLqDSb8up\n7H9JW2uPaEgLxucpZ6QAZFauDIy7Sb0R6FzuVVSMg34L8FuGiaHxX9WdqsX9\noFYdoeyK6aDmHkjKKp+By1KzDPFrW1NK1wqjqduPbFYe4hse5AfyT8A0gePj\nBEvW3ICVKc4qVGFej5fIsc6Iso+s46yNVlorq+1qXdWFyP6Nm3hNsO7IluVs\nv/1t\r\n=TlHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtQgjVvcQ8exJraOKpqxl1V3HZsaeHdOc9rrEhOeaQQAiAqC2jnBkSNZACnzxX6sXjaqW6HLBLImieU6jzgVxliUA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.11_1578405657919_0.6908152182746425"},"_hasShrinkwrap":false},"5.3.0-rc.12":{"name":"@storybook/addon-info","version":"5.3.0-rc.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.12","@storybook/client-logger":"5.3.0-rc.12","@storybook/components":"5.3.0-rc.12","@storybook/theming":"5.3.0-rc.12","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"2c0b28727a924c06028eb755e7b11a06c82ee464","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.12","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-NM7JkG+ksBZaJnvDvHnc3OMbwYzaBvuWFcknNYZ5glgw0Y4G76eUYlFqI9uLOoBptU+Z+5nAFfHyXLNmtF1X5Q==","shasum":"f36eb92a442fdfb8a8b712d5464b3fb9c62f877c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.12.tgz","fileCount":38,"unpackedSize":227450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFe3gCRA9TVsSAnZWagAARpkP/jbbka4ApeHyOdqIT9gt\nm4uzYgAQbEWngDuBqShrNp0SwLK7ZDSSjL4uKjik+4NiwTiMcmw1u3iBT0Vw\n47Pqm6AFhSb4cJylbJcdWiyCHu/XQnxHH2JtlQAU3Olx1iuvlMNEjPNjghod\nAxk1stYHfnppz3jL4BRJ4g7S3vRgjTSNYGAfaw6TqUlMF6/qHAnfCRxVaB82\n+P23iZWIXLoScuDQ2A1XZm2eHQo4uqvQUDyQWb4Wzydc75SxNVY9PlCsgQ4n\nPMB4EOWkbdlg3PB31VLBmdXzZzki2DaIjDYs7FnU0JD+XUkd2xQMVl/RUYhC\nj+9nhloKbGjo5lMHn27zrCY7nILxh2kWJ3YpQxzM4GN34GPakl9eoaV6hrxp\nTAjNNCjY4e36xgN0AT6WFXeWvjtLp6b3dL1PbNoVyp2iEYV5e/o6Jo7LV56S\nUB+11d+onkHyxXBIoFsjrpzJUpYN31lyEEll1PPz/BcOfUpqjU2W6UbpeI/h\nYYQBTgap3760ZKCOTLUX+KbCPdR4/B2NYmnYVPeI7QYokoQzK3G/jRUxsykq\nWq+WCOy2Xm5EXejustD56pSigWgaRpQ7wMePkb+TNSJ24oLoCBHxOdnKv87Q\n3IeSxLXBgHFRMKAcGeNZQ6im3m02F7+N0Xkmf2WB2fErwSL9l224OVLKV9vE\nFIeB\r\n=HN9L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3GB6feXoTKjcojocAJbRMBhif/4cdpvRWG22aA74zfAiBdQtwBjXiDf+OIp58CjzPBoLo0p/eSyIONk9RJURKJjQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.12_1578495455837_0.39716115312453515"},"_hasShrinkwrap":false},"5.3.0-rc.13":{"name":"@storybook/addon-info","version":"5.3.0-rc.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.13","@storybook/client-logger":"5.3.0-rc.13","@storybook/components":"5.3.0-rc.13","@storybook/theming":"5.3.0-rc.13","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"90421068801bb17ca58ab29e6c10a73d807f3d87","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.13","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-bWXYmapXRa7s3h9hEeAf8AnHHRH7imkWhoRAsvIdkUUkiyR/wlaWpFz+yeK+gmknUVzY8m7yBcpBOLq+E8DrXA==","shasum":"189c1691071f66e91199c3ea104cffb85fd1af8d","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.13.tgz","fileCount":38,"unpackedSize":227450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGTC3CRA9TVsSAnZWagAAU9AP/3LpNjdDdVtAOvoFY0h8\nc6xO4sOqmsHg87zWbNMYajKNzhkpEI7o4tdcw4NDtBzyMcZJXgqW2aK2z+Q1\nzWvNfhtCp6o51jsF2huMds/w+i81plcuAYXQG2ySGdPHE+Npyr7tkPtzthBo\nd6BfeS2rFq1iOGuPvyhwFbgeoUxKqXkh2DLRn0xHbP1n5AET3hIHbZb/gr+4\ni4y/8Xr5UDg4/BIs0EAuv451kqd0Q0JMW184cRO+DPEVxTicuDkrYw+CNVnD\ndm1yh/GSJgXat2itmOOhRMRXr76Z9vExIzsXhri5e63aqdRnl7ohqBcRtqMj\nNsvTh0q8p1yhJh4FDtun3WsyS1FQIIKV6PlmV5fm7d0HEqVQXcTPknWxoboD\nsHgo0j05qoMgH0BiZpoRu4oInSY2n+Wyw0GE35sxKapmFHcAVZsB8CiuTVpd\nyt68Byzjt2DzKhEKvjZsUaASP/hnf2V5d5VcqV691K1Wmj2jHaaCevYXnHlY\nwNpgYlzmvVkj4wrlliUIc/qzz/jicd+zH9iO4+Ix8EMkhVkoJb/BQVMQyAi2\nOgRDNVQBQubtJBxc0lCPfltx1Bwm5qLxVz5sg1EugmsrQUieQcxJdSI6Q3pn\nbwbWcQmoHPBAd9UTmossMNT3NNFrZbwy9RaUiu+ojHtoNa0bA6VRYhS18Pg+\nSW1z\r\n=/RGf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmBJDe6eIfyRnlY3JsV73BBG9r3YRV7eRPIsDzhC5tGAiBQvtRxSi4pNdl/1tXWeC+5I6YoL9coaWX/hHCVbs3pzA=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.13_1578709174730_0.38568197704429963"},"_hasShrinkwrap":false},"5.3.0-rc.14":{"name":"@storybook/addon-info","version":"5.3.0-rc.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0-rc.14","@storybook/client-logger":"5.3.0-rc.14","@storybook/components":"5.3.0-rc.14","@storybook/theming":"5.3.0-rc.14","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"aaef883c4786495bfdd1c0745df8c1302acb3255","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@5.3.0-rc.14","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-oE+047ivfeLL5xMhye+MvXmpo8mAKmfi6Q9izrt9C5ak4oWJ1TzEDeWRfSBAtt8ZsLEFZibswHpYoPxLRwvNZA==","shasum":"dd2f7733f3852e04ee495434f33b95748528ce5c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0-rc.14.tgz","fileCount":38,"unpackedSize":227450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGYyqCRA9TVsSAnZWagAAJ4kP/jOXeR+EbGlXxBFiDnGB\nRDeyZyN6SxKYN/kCzN5ndkP9sLj/4zuRMkF/wheo5CXilrkxKsgIZvvfh78F\nSbtgLViX0Z/V4/i+0PIh4Wz6qlKyvElNGL6T+VWHOgNZInXrC3+58LTAeyMP\n5qRwMDDWm1O9L7JRV8yPud6NkvZupYAnzoTI8lN8EfCR/PnIPUfGp2cW/EWj\n6AXeT4vwThmB4N5TjC8F5kC9/dpQsr6Sny99TbJn9QEiKpyNGQb05im7adjo\nQfbgsoydq6vFXbmSge+4m9u7FO96BwXgyPukKixAsW/DeLGbUjDKT6+VU/OC\n6Qn7+nKpBtEi21r5NXE775vIQR88sHJJp9IQZPT/d1tgTsFp9BDnOTPtfGxJ\nqi9gLZQaGUQHKtmYCGeco+L1/BrgKneWZZSnOsM4k0xVH5Oxtdad+CGwMuOq\nQG9KwskbNOQSuM8bfGsWm7icxzbG6eWlAjxW3JAKSvg3iFBjWcMW2tMolzkp\nSqY2cbfSWC/rpCuRJGh/99UFnkL1R66HseWAMI3LbhKb3F2wp30PDiSyvwQp\nQqPTz0SV21lysVwl3Y9zCx6NzFEZo9b/ahDT4v2CRwhWckGtxiXmluh02w4i\nge4j6u+iYO7hSfEIUIgTiipRuP9l7Xr2wzmcbx9D5orCfbjgbeE/LhjcZ9ma\nXHwc\r\n=OPCl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG5b4awF5UqocKRMsGT9boXtUwoXb4ut2qvi5Owgu5kAIhAOmd3pOgExMPw+kJ8oeLPFx7lIJxmw2oQQQEycJa0Z2F"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0-rc.14_1578732713737_0.489220375001032"},"_hasShrinkwrap":false},"5.3.0":{"name":"@storybook/addon-info","version":"5.3.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.0","@storybook/client-logger":"5.3.0","@storybook/components":"5.3.0","@storybook/theming":"5.3.0","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ee7b9591ba9b2c1eec15e8a67bb2d52db99aa1f8","_id":"@storybook/addon-info@5.3.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-hv6oxsmf8upGj17zrlM8YzrxC0LvADV+F1O2/y2ys5/DIj+jO78VLtQNK0KgNzVzHOOJh9R1pa+oL5YClqacfQ==","shasum":"ab4070718ff745ec5ff790ca86b048d3c750a948","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.0.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGZa+CRA9TVsSAnZWagAA/U8P/1VYfeUrP1Nh0RHLYfc4\nVeaOxKBI5WHxH+TJqhVOOomn+36NwAGk/w3s0iuFjQ/wikTiuoQ06wJo4eaM\n02HI2wB+1RJTijUieWviG2itoihg1slCNyAVNKXBztCCmSZneGGZNT/xQGGu\n7z3OTDSWSV4nKVkIjas6pbayJIAs0W8Z4ELDsS6lURRmV0YStlfrZeR+MnQK\nWVmFWSMMf/LwPJ5LOBLNp1KmJrDe0nraR1LHlNigXWYD41MgY3OAS7KC8YCG\nkDaWXK85uyjSsUnIt2W3BJd97LwxKi4EcyivdSg9gsklI10kbEAnTWVseM9O\nb6hcUjv1/4Av95Cfn60wvx+pMltv+NhNR43sBaIgewmZH28teQziLTdNNZPJ\nnHpBRS/8sJKLlxV7/T/CucCfsUCztZF9qn7LV9KVE5KDjVPEFvFMQuY/3yb2\nNo09RybOlYjFVsKzCdXsw/0+uBhT6DOAyhsCsonz4GcV7zSb2sFgB3G27MSL\nQUwJvw1VgDOGtb7wMT8o7WkPrpNoWozTg3XfjrntWd/zmg9uC0nvlI9K67yj\n4EFeY6HnfnzNxWSrxIdXp44jt6fOiiUWc6LgAS8kKbeCep4MyBdSNC7Kqz46\nwtIDBg++NLvubUlwQsSL85ayV2zO/NZ+B1FFiHdRAuxtfGbECXS/YukeB3zD\n39hf\r\n=tCWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0ndYCjFifKN04HaglUB5hHOZS31UYU+6U6A3zl/UsNAiAES/Zg3nzhpv6ZpbjBLYSHVfnesiBP6gcncJpXWADhhg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.0_1578735294045_0.27537474857611444"},"_hasShrinkwrap":false},"5.3.1":{"name":"@storybook/addon-info","version":"5.3.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.1","@storybook/client-logger":"5.3.1","@storybook/components":"5.3.1","@storybook/theming":"5.3.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"14f9760411c2087f78e3b65c5c63947c2037c52b","_id":"@storybook/addon-info@5.3.1","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-wUbuc8Uv03V211+2nQnYUpAD4mQAjGT86nffmkyZwAS9P/PQb6Rj4A4xmzhNd5IQ3d2VvPD/rznNAerB3+sLWw==","shasum":"bbeebab7fde9727cf2b0af24b02249a4fd5c052a","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.1.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGz1JCRA9TVsSAnZWagAAJWEP/RCZA4EqtBzJo0IYy8/P\nS5l7gFHsgqnng3SRRxJ/qgng6r3z/bD4MCdqxuOtBfN8PbmN23rzTNy+Kuyy\n9TPBBR7LKhWklozTexrnEo5jBeXvbMxQbO6H59D4n9DwrY35tLqREtFLDOsZ\nyVO9M41c1DBXzqWedVPH95M1GdUfdPxgzZ/hp4VmX/Be6Coo8TD3thNNSv5j\nzddM9KdAFfpf7lDo/+NkPG4zNQxolYMRjstlKPGicljEdjn2iHPW1tD+iFen\nqsioGNG9y/1hN7cf0s/v+AD/a/NaBBK90mT+V6gRTgF1k2R3dENAHTf7Ofe1\nhLe8oWmsK3jhsbWIcisZdRxnr6tmocqYO1HTBd/UgggLoj2rXQkaOyMFYdzD\nzjBFnxIcVUos82H7IpArTDC7gLKrtwHsNbUORo0GT6HMh44O2eHKk/1g6GJP\nI5N/XFfdBEkHGhszp3MYf8kzKNgN6w1b5p7g1W7LlCm5/gytAlQAdyyi60i9\nAba5nFXgQe4IYsMfhmtEpW8d7Ot3DiZ3xpTKvEV7j7vf3Agerdgt/XsLD9MX\nNMusEWFHprxA9L26fZTVMD0TZU0onHQH8E2wcH/flI/hf+1N7fm5l9XpVzDY\noE7XaD+cg4MU9GOmUZokMVm5jWAmaCD5hX0po+/PhjaNoUSXLGOPPQHpJ/NA\nCwFV\r\n=VPDu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUW4aMWzoYfzzBtC+S9p6ITpiVQlYzzNwL3ZYyc9npqgIgYoKd6CFVsaq3BQqb8ox5YSWQmmlow8MvL7y7JeJdQu8="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.1_1578843465346_0.4421537843373471"},"_hasShrinkwrap":false},"5.3.2":{"name":"@storybook/addon-info","version":"5.3.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.2","@storybook/client-logger":"5.3.2","@storybook/components":"5.3.2","@storybook/theming":"5.3.2","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"5d581285e2410e238c1f0d7d5567d9b467712620","_id":"@storybook/addon-info@5.3.2","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-9vnV3rFfsBdOupVzzh/KSEwo+w9bQgN/URTYg6NuE3jCPO7/WtRStPCl1F3Z+It3KJTGEEuEbojf536Gd6nOpg==","shasum":"0a4e9c6daa8f010311cbd8927088c0f7c78d9d05","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.2.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHI7OCRA9TVsSAnZWagAAJY4P/2lHmk537ZOl2gPLTC4p\nppCpXC8FDY62lHgXUTUNSQH9nTkEh173pbXi+PkCiY1nQwuR+4eRj1uCw4t4\nZFpjXLB0TXaHQp3bZlJ4VjjXrvBU3SLzbOJI7sqF/qzx+Uo+80a3wV7G0zuJ\nOXibUA5bWlgDhEblFlcK6ZdqnHGDjGK2ESpI5bYkzTV2lG3qW7k3L1hPqjQN\naH7lM6uDoxqwmUanpoSARIEZ7O5Z8Bh5qfmeFqDHD8ScnnAXgDOervBwkBCq\nSDd0jBoTv6PT/glRNhUh/UU6PVsnwxFRwp+ZRI81Ncl0tqJb4ZiRtf72WczM\nS6nhLhH6pcSO2tqTG+t8wy9aedsBJZI/r/q/0jvyjwGU086B294cWUgyWqIL\nroESuL/6d7gAKfqjb0/++VgAr8e6SieZ8EVLNQMGm15VGZhZXdSQzqaSCWTT\nL4H+wbPAZDwk+uMe0g3PKuO421mLgzKYw7pcTw9+D0LHfptnOvR64r3mzuwX\nwa2FKt5mvElc3IFathr+IQHMdbdmpH7GBG5HNCX3UewzTs/O9Ec3wVhBuB2n\nnA6mrdnXlRQCFQY1BizfobaITzEHv0QvHUi2A2LcTz6bYw7tYTzP2gPEzjls\nSJfLliOfLyvMbNUDBhKwQpWvlf9OztrPuCDAH6IdcIPxPCQ7JypVDBxvlq0v\nJ0eo\r\n=bTrv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHxkuYXQ3RL1eEmCt2jr/Cw2iABppjpkr4uqMWVfjRbQIgN77N9BNYgdzw2lTCJhmrktO3P4jIUGFgTqeWVMZTf/s="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.2_1578929866968_0.37005970805684685"},"_hasShrinkwrap":false},"5.3.3":{"name":"@storybook/addon-info","version":"5.3.3","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.3","@storybook/client-logger":"5.3.3","@storybook/components":"5.3.3","@storybook/theming":"5.3.3","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"24ee5fa7473282d0d5ff0b2ac9fa6632990a8917","_id":"@storybook/addon-info@5.3.3","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-SMieIbuINqdpUnSP81uKgupZWjuwPcdNHe9Ys6ygWc6r//Vodveg3l45207buQVvb51mDCdLtRVt8nVY2DjqQg==","shasum":"36a6ad1645fd50908b465196b3b77fdfbe6c2093","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.3.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHZDlCRA9TVsSAnZWagAASPUQAIKD2DNE1zEmKKEih/oz\naI6rEBwuzvrdHcmkdXEv2DCLbl8oW2jfbpck6bubdag8mYAFL574DebWufb2\n7xvDCyxKgUisD4IPeyOxNMluWv8bkiiiJmfLx6d40iqOTd0xBLGHVtGkJcy+\nbz7Xcjsc4IJKQ+/gLaKuK7dTk01DnV1FKQKVuqySrkoTAueIbXp+VEQ5SLuv\niS7xwPNA1hQettX1J7PxO8RGnomNjwmifIPAZMhvxqdbmKFkC2qh9ZprsM+d\nrg/JDPHemp/CWtXP6cYZf/k0+x8XGWP71bMq42LhEnpIciFwj0XRRy4l5Trp\niAcsc7YKXZ6+SfmkGM6u1Fr+4FlGZESpPTy7IzQRRwDlwb0aRTaYRJF9h515\nDGLQ/EmYXKQJB2mJUTDVh5T5Ga11rFZHzDpAAu5r4pwk/jWDW+wt9zGXK9N5\nL4YxszfwSvtA/n+kxYaxmVyOaWzmfWAK3Iy1cSEhLMMrBlZ6jHswudA/34LV\nIuMuT8GexAyclDUepXsxMB7EOpYlJ4RchkuB9czfhtHE+R0m16xbkpmNvTOr\n3orgF1YieWAzsB2xgxKRC31JROH6Iw9vrQG2XNw0a+Enj6gycsJII+dK9Io1\nKTLdwSikRjRrp6H1QUwSYVoXHTZzTBipecTuhyDWnhTuUObTweFvVc+HXm/U\n45ll\r\n=vlia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGE5sQkgefVP05FSjJwiV2pupRoxOD714KlwBpBwAp6bAiEAmMI5fXSYuQ8v+nfaRPhQlR+CZctczBvlzS9VB4Fzuxs="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.3_1578995941478_0.9874385491891919"},"_hasShrinkwrap":false},"5.3.4":{"name":"@storybook/addon-info","version":"5.3.4","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.4","@storybook/client-logger":"5.3.4","@storybook/components":"5.3.4","@storybook/theming":"5.3.4","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"25850e1e34799a8e1da798e91873d2420956540a","_id":"@storybook/addon-info@5.3.4","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-WCQnvCSEILQl3SNqgx3pyTz/1u+WWdFp1D2Hf0Y7ymFZgXEvIUjaBK3kG9nUedBMR4pItvwmAJF2XCZEI41r/g==","shasum":"7465a7a38e65da477e118b3b2633a66bc74f605b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.4.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIAFMCRA9TVsSAnZWagAA0LYP/0BhkgOWoriPsrJm+pqp\nl+AYbMm6dDEHPBJaSY4VCmqnrqJYQPBtz4ui3NZaL02c5+8HyPENwMXhuiUf\nJwZ2TAppC/65ROxQy/VSNtmxefzP/fz72zovFuQ7xh7lyEnqCj3DMKqaTZ2C\nxpBFYW8CPT/kEhvgMUZHvFK2BjLcR5Gsj/VKbJ/3lE5Yl4zU5s6LMRL41jUP\n5r09dl8drWBuvao+eGBr6e0FM1PLbbCV2Dhsx3jGK+bbsWn/Ty07tjEhXogB\n6EVLR/gm33uSLbN6H0qTVnqH4+h1PNm/fgQ3tGh7Z7c/7CTC8k15YxzCn8AM\nTTjKmLx1WiU3b4IHKFFMEoPX5owXcXHKthHuiPmRA0sBACQ7YYgKPT7tSXtI\nTfPC+ChydSGtBZjdne3uJ7zSwuczGQucZNedKsv/p2VYb0O+pSUsHanLko4p\no7D8G58EH39TKA78Do0aX9aKP6JGFqW/d6gH0KR90Lq3iZXZNuNUBlYGirad\n6hTrgwHuHSO7rl6mRsTlPKh6uUptdTH0rkefJBoldro/tLV/i+rExK5L1QIg\nVWXlo0n6UQm7SdVeeDBv4jcipb7sN5Zyt6w2+PF76bjWxMR4Rqs48U929w1z\n0ZtkiHDOsOfF4ttYODdqiTJ1Bqg1SXn2+T68zA4cJMyGOzmsQzVSdFLrr+XA\njZ+d\r\n=/haR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUCPV6VmaysHWoSUyx77F+CWKRqIKL1lUxNVbxkjQ15gIhAMndvgQfq/mM3SFgoELki/toocVI+/0V2tKgwM5BPqGU"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.4_1579155787588_0.1044450163162649"},"_hasShrinkwrap":false},"5.3.5":{"name":"@storybook/addon-info","version":"5.3.5","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.5","@storybook/client-logger":"5.3.5","@storybook/components":"5.3.5","@storybook/theming":"5.3.5","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"f32b34b493b30f1f80ceb2568f3965c6d3d14dd9","_id":"@storybook/addon-info@5.3.5","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-WU0FDzaLcKRZtOcQljEeBOrI9CE6xDmILU36cXeDsMhE9kAKNTSux5N46/piqCp1lfryT3qOxGwJIZNWFI/o6A==","shasum":"507d88ef81172ff204ef9d9d10b2adeda1011041","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.5.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeILqCCRA9TVsSAnZWagAAZzgP/2CPXPmpmLTJxn4iHEgr\nvTNMR2jKWmDx/rxrtHuepSVLEpTVxMMY5Ob/HyLBQ9RYq2so2W7OUQmGBkr8\n2HiUxkRQ0vi8XAsovLTVdi2LC6nzoGMTWb7M3279+JtY+t0/RbYQsx5vynFG\n6rfx/6c3swKTiQwmXmUeAQ7ad5hSIRTaOkAPY1hIDYW5Ml0GW9Xw8o//b7ca\n/W8iFXZ3hZo+up8Qa9EFR4VptypE+fO0Z0txESPSj8zY9w7CxAS4wgSDM+Mg\nUYLnd+Mykf5930C2v3HuE7FFHbZEyL5TO8KjddyBfmKHBUrbMYIVwuHeRfAZ\ngWOa6zi9r+wanCKbpcWsgk/ARIGP/cqj02H2DtSeLYo2XV4TsTToSVtkY5kG\ntCK2bs9BY4tNGsSrAMGJo/1XwRDKJ/vrqpVwtLtQ7LBQgrWkUpVNCwuBBp8b\nPxAlwTieEBxdILhNXEOwWeVP33K8QnyYZvDw+OQsaEPbhY7ZxKYpVJZlJCmv\nA8CpZ+fpRyAXo3j/4oVFXF1D2DQ4MgfXZ1Vnu+kYbARy3oNUUwC5VcjQ6LIV\n1qyj0IzJ6pb+uftWEDIWATMK4EH7qPys944pzSQAb/B/xRuWEktyYu4TXEho\nKVYFNmS7Awlum7TEtwsS/Oj7yyuYlL9l7dt76fxth8I4O2wu/aBiMotag3uf\n71L5\r\n=qUNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFtodPbL4O0LZGyt92peFif4Dsf6aVo5/g5MTvGFxSPAiEAv0UIMyPylPqAnV0J1ayVmAeaAy+0yixu+cxTcCZUzd0="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.5_1579203202252_0.45634064695415555"},"_hasShrinkwrap":false},"5.3.6":{"name":"@storybook/addon-info","version":"5.3.6","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.6","@storybook/client-logger":"5.3.6","@storybook/components":"5.3.6","@storybook/theming":"5.3.6","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"b609ebbec1345c0162f98521a53c5890f0655804","_id":"@storybook/addon-info@5.3.6","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-GL5+wDYPdlqKzzuzCjohF6GUQc4Ds+CF0vXn84eJRzF9m3ys0FgWcJ9Nv/eb5kKkpqAkjw7BV/CZaQNpy8qEcw==","shasum":"e7905ab0c1339cffa83f1a3a337c6fc99af16c74","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.6.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIW0xCRA9TVsSAnZWagAA6JoP/RBiOzY/7GmHB7fgnSXN\nKN3fhnZ2Xst8u0epfx/wYL5bEU8bRNf9zOXFb0EC3VHad7lLM4lI23ofW/WP\nOw1j21Bk/0Lj1WQjfGvJXFiWvym9ylt3L+svND351Vc+6V5EcGk6qLanC3fI\nGnC3s1Xe6W/ldZ02Wc47tL2fCYzGwfzRQFdjkhBD/0yj3Hnn/MkGNrUHzY91\n1jvM1zhZ+DfqYMNh+jAYMT7VyfuVwwmrMSMi3oneViemHy/mqXb39JI8WL16\nB9J88/L3YDWAnootvxIo+JnGFCmHHN0QD6iqEuznlDRJeq/awhZU5l91DPC8\nKl5pjlq8+/324KyJbqa6AAhLXzNw9FfYyRUZ0RtlnLuvIofeqxlFAWdfZnjm\nSh9BEtnVHzTKKpHEW9XXK5ZqUkbz/IoCVzBeowrg+lPimElpzqytBgMqVrXd\nXypQI8pKFkfjwOSyg7y1MtRZ18/cQbg02cDn6DeAxCPy70E1xxZSlR05HWpB\n9WFtZIA0Bo3SUmawk8C/3VIBQBxUsGvC/LW8Hy9BqcbdUYyzmC61pZIAiSDU\n69bgVlcdItAZcjpG5VHciGgBHOK4p28oJW51QbAYv+n7LNj2l5Siy6pmjYLm\nemfAoeTUkrhueHOFCn+M5/wzpX7QEd4Wqq5fPZri7wdUJwWC01er1A72eFBL\n8rZo\r\n=HIr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkPBJOxkKYB87cuEV0XAqjNMvwVU2KuFeGrmtR0v++ewIhAPEhOEXNIcXe7GAtRayKHLtBstqdEt/ZBMWPc0VSXVha"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.6_1579248945418_0.05961018764462511"},"_hasShrinkwrap":false},"5.3.7":{"name":"@storybook/addon-info","version":"5.3.7","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.7","@storybook/client-logger":"5.3.7","@storybook/components":"5.3.7","@storybook/theming":"5.3.7","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d6d745006f0a4d6e5dc8efe40d280a52468bc36b","_id":"@storybook/addon-info@5.3.7","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-OYMOb1sKp+J1iOOK/REzEyZKP0Hi7bQIfGM88Egg9DGf6hM3XOaPJ2HxcWjEVjW/MJRAO1NFtBjnj6QtAqx3oQ==","shasum":"e66a3aeb0b533be7da45bfd862296a3272c8a569","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.7.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJU9DCRA9TVsSAnZWagAAecYQAJ/+D0zLc3z4T321u4w9\nsmYO4wGs7SMo7K+G2ESuwybXVT9g6UlQlEaEOMxb3zww5a6VfR8yn2olI4DD\nbmygayIAznOmhud6FPR3AI0jq8VYQW7eaMgQOLYBE+p4C7yqJdrYYJ2uG+QO\nYTToDcr5vgfjgjaCwu3Jtu/q5JdJl5kPf8e4NQpAiJ32NKEwcdfXn03houkx\n4eUq1wXY79J67ChN2McOtNdPfW2L/hE19PTkFFRHExpRrTZcXWoZtuq8ljF7\nmHEBHwEL3+DEghJTwDBAwAyAfj3U/+DQ3CArhjMYko1aQwza3RndCNF/lmtf\n3zzJNAHcITRd5kSeADcz7zVBuk3xhVoRVa2Ku9uaxdcVfeO5r/U7xYmbmneb\n1iUQ0zgGjaiWTW1jfwUGIB8scocvgYhA9XyZ8jJeoUZFizP1kpl4SfbYBBZe\ncjkr+hPfPWD+8JrPkDCkjHL8XjunH69xXHL+WoHohT73PevRSmXkkU9DtQy5\nVZCfP7SCNQapwqn/Ye881DCCJKS1G5Op4UxQTQzYcdxz6CoYkdNlrBY0O3E5\nnmagybOSO4j4HnRLYIrpg1Ktz8WFWYg8AuZr0c+4xTNZlEvxZZbKyeGo0CKo\nx3UCbZe9Rg2/fOSx6HwJ1aFzr5X4ja3y/sdF3HIi5OsdTipa5/dVRzQqkA7m\nXlp1\r\n=/a5r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVrey3w9QAWomivbj7ERt/8bI8MhvES2scotQmH5SRuwIgAabNXkEFFo7ucgQnvUAwAvrbOjQlmxTLGSeXdNl9LzU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.7_1579503426644_0.43268672014591125"},"_hasShrinkwrap":false},"6.0.0-alpha.0":{"name":"@storybook/addon-info","version":"6.0.0-alpha.0","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"6.0.0-alpha.0","@storybook/client-logger":"6.0.0-alpha.0","@storybook/components":"6.0.0-alpha.0","@storybook/theming":"6.0.0-alpha.0","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"0cccdabb536469fb0bfce9e59ee70d4fe39881a9","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@6.0.0-alpha.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-eVhnVB4XpKFN+EBZRAZBQqJMg6YrPIddNyNhFjHwIjZgyfOzSt1g+dIcAaLO/3Du3wU5RpOtMzkt5aznf93QIA==","shasum":"58ecdd68632a1716bf75c7a5550771d1529efbbf","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-6.0.0-alpha.0.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJwmKCRA9TVsSAnZWagAAczcP/3mAoQAmIVr61JPQRsXD\nqlNG2QTQO67/EFyquoCkAgAS8m+fTCr0uLFMDQ+1ylqsD0Tdi+2nJvYR7B9o\nLlg+MAUnkFNfM+qvP5OP3td6raedtxw4ayaq6HPJccmFn0rClAzZSrv587qS\nd6bcV3Rq3bUxxj7yKCQW7LXQ3gJ0duzby+tn+yJZZkCn/MzVkRGt/aB7X3E9\nYFJdU0pZ5w8GFwlUJnreD5DhKpVjjM3O+fH/0/Zw/NHWybjPN2s01OOZ9yLx\nlpwHzdNxIck2Y818/CyGiiDakXFrc600w1aNcTpwoEpDCZi9wzWTub29Sgry\nukCaO4l7RZUyWDLcvFuChkAEL4n8R4Lj0tfg21qSFZa5mizGCQjqWstiS32S\nCbOrFII9nVNv50n96WwkoYEvYetbaiWF8ToEWZZetL/KpNwLkRSJqymzDSe8\nY3gT1PS/xZ99Y6uK3NnkTrXAKrMd6nGzfzEfiq09LlVzxOQuwFYpIYKGvCUh\ngKU0Pvv4LEAskOZh9e647aVzu3pfk7GaglMRzPGW1KDeIqvNjlQ9j/Wn8xvN\n61t3/KOIk9h2gxbqSfw6nmwdDGMEl8hgruHYxpm82BriacxPGle21SanRGFd\nptNkrLKXNcW3RFKiFJGT/6u+AHQB5el2Ri/WfK14S2rEFQpplGfTUXwgfPAJ\nyn7t\r\n=FyNE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7IlG8Zyj5ZWiFu9bgd6jd1h73KElaO0h8kzzj8lOtlQIgcmG4Tq47x8mf/ad9ehuhcw078c6QBXIzLhmqegn45vo="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_6.0.0-alpha.0_1579616649799_0.362320059412794"},"_hasShrinkwrap":false},"5.3.8":{"name":"@storybook/addon-info","version":"5.3.8","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.8","@storybook/client-logger":"5.3.8","@storybook/components":"5.3.8","@storybook/theming":"5.3.8","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"fb7d7e6169bb785b54c16c9b7e1dd8da94a78ab5","_id":"@storybook/addon-info@5.3.8","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-3XaluhIJeHrzQVYZL8/fsYBRf4vWVU84uED7iq443TmY3B+n7uCY37iZHYPSio7b4HdWam8zGQyHfZeVktfykQ==","shasum":"edd4959653fde2e7ca8ba3f1a192599e41a31e47","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.8.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyypCRA9TVsSAnZWagAAcVAQAIgQsiDpNhvMLfvQqg1v\nO6kKNtZpUKYh9yg/1dQziotTml4Qp96PS154mVtqqrjVcvqWvx5baU2zhAzz\nKeBdSCITzBPdWmqF5mke09SJjYW0AujYnrpk47yyB8Z+K90uke5oADYaEoVP\njUXKKBionn0ge4Akrtn5qQgl6s6S8UDFyWEH0yhSnU/mSdPiw7C4ZcmWQ2DB\nuAE78JpZPWzK8K618I3QLrIOkvjR2lrJNlJpZQoYHR7rIPoyYsdA/f18LUNT\nLEJjG6dHw4k7NmqUApztBBNRwM+m4LX5q5SqoNlH8dag6XxCKS8gXeLs8PuQ\nWucHv8Zjy1sefn8yIG+CxrJG5G07gHQp5aIIkEZX5Z+kNOnKd4LAo5ejgDlQ\nwx8NxdvlmTsXb0KwHWw5MJ9RSTiHZDhePJHflvarHUfwe/06RpeSSpwfc9e8\nqDI6c5VQHN20b5OQTEPhLDXCmf2YtCb1/n72W2/oMtp5WUhREK/iqyZvQPHe\nsK4u1xW79IJn/ep1t8kTXtApjoi1PwQI8PUK7kNYllyJz6tmbgV3EwRet7R9\nsg+E+KrOGShi8mUwQwcRIBUFq1eT5vIXj3oe+QeZMItDS8oaOFVOgjMCQPIr\nsAJiiFS8JJ9ctlKVIhhcwk2akTzTV6wQUGTOicko8+CZTsFTImGJXn/iIMyB\nLjRU\r\n=5r53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO9t2CkEPd/hVYgJlJwJ7jgkp00UxAgolMnftosCxLVQIgNccyXLdmiA/lHSpA3GsUtK1MdrIqsS3iqwNo657DVaU="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.8_1579625641140_0.2180029727198145"},"_hasShrinkwrap":false},"6.0.0-alpha.1":{"name":"@storybook/addon-info","version":"6.0.0-alpha.1","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"6.0.0-alpha.1","@storybook/client-logger":"6.0.0-alpha.1","@storybook/components":"6.0.0-alpha.1","@storybook/theming":"6.0.0-alpha.1","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"81cb58e2f0512eba22bdf49cbeb8920bb51be937","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@6.0.0-alpha.1","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-viD0qghEYDmK24FfocStjmrb417S4VPutI9dtCIV83RZOxeKXZan9ZEnfmGEr1oyShfgsy8jo7WS9LrEQ0fEZg==","shasum":"0516caa0252a9c183995c2bdef582228a76c1ad9","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-6.0.0-alpha.1.tgz","fileCount":38,"unpackedSize":227460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKZBdCRA9TVsSAnZWagAAHKcP/3pnf+/EkRgW4lgCdryb\nKW7pACKaY6P0n7/BetZitSH61yU3YFI8BPQoe7J5MOrcTh46d7TUY94Knb2/\nXQOXpR+YyQRBHJ413KD853tZOVoNpxtaKTnDJXg64qORsIKfHXmdX4cG5kd8\n/V6Sl2ZdWtEKdyb4GkrOsa+gKHAl3iw5i3gitnCOs4D8BD8rjxHXP0eTXbgv\nQU2o1Gp9jCOmokTEVxlB+a2VLn1R9rTYlGumjmZtP6+9HHgk1X5vT5sA1Nj2\nTzRKZlEgtWO9MhY3/JN8ALFa7TGkgZG5Hz8Q5rLpN71EkLPloOedZcyIcXxD\nxNLh8VTZWwyc+kdjmquxBQHNpqC2iXabx7iIp3t5DU18OMWbAmZ6cQoCY9ny\ne5NVKFTpUog4ZCH0C79hAjRI3dDlsfJrrKSj/lWYU1kPuEZw7pGluFrn9Xon\nHmAAI/kc3H+UBb6zfaZU2AQjoiQ5EDXxtvx+ZlmGQ4TBTyE6Xq8O4Q9+LK93\n6tvC5/2IuFuzP7eW7x0KJfojzF7x9zHBc1QnSJi+L3SVZrG4ZKn30KMds+G6\nXR2fSGPWMo77NMfCDvR0r60R8D1Z8lw5ltcuPC6Z4UD07heJK5JpBOhQ+pz5\niLt1mW1Dj/rlfvidqKQGKDyLXX1oFLd/pKZxVvclSTBEICVFLy7thsq55Snq\nWh0d\r\n=ExE6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHG7hj30jSYNjPwdJ3NCgd26+9fdXQfKkT3QKzDjZGbRAiAfG8Yt8EqC/8xNwQrrVPZ/boDw1MHsysHYqiE16LD6yw=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_6.0.0-alpha.1_1579782237094_0.5040272301994406"},"_hasShrinkwrap":false},"5.3.9":{"name":"@storybook/addon-info","version":"5.3.9","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.9","@storybook/client-logger":"5.3.9","@storybook/components":"5.3.9","@storybook/theming":"5.3.9","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"94aca9f154a0ff6862bd8407d6769cbb6c90b1d9","_id":"@storybook/addon-info@5.3.9","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-KX4zlDdbgp2JAw7MvdX5GmuT0ybLpS32k1Ej9PFo2vVv2BgTdliHuFdcjF3Ywr+fZYhD8KIxTMUSpEXgIlsxAw==","shasum":"626950c69fdbfe9a22b0c4f4f2ae9531f9431c67","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.9.tgz","fileCount":38,"unpackedSize":227420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKvvZCRA9TVsSAnZWagAAkNgQAJkkpwrytmcq+Vg7Iy5D\nUKbFTlQyTQA+Fr28KRb7WNelB1FxlGju3XZS71BdRzZwiVhetP9kYasV0s7z\n/F8kLbkVhqxCM9eG+Yq5EE+wZyXS6z7V+966U/4DX9ROv6J/LMSr5IVdA2pl\n/Wc6mc8rE1aB3xXRCLi7LhPE5gYhlDKm8bOyYZLNcl/tS9dPfwfsWanAduRT\nYNMcS33TzBDrTmTkBkK5RLhCqVEltK4vPgRH1L01TR+cnafDM0Dg3cTiMRPy\ntxOWGOMh3Xk2ej+5Umti1ybrEhJDSavELY9zhJWBVPMmTV/Pmpmn7YNXZ9xM\nGC6Fo0NvafGEj9nkzc3wqho89xSO/vlpJW7vyJSxWE83YaYIr6D1KH5PcsFk\nm+upYtprkDWpMNphZhGGkWNrQzMfbaO00wGmCGysD0NU5v4s93qeUY+2rSSS\ndFr/0DGVMSwl1rXF5zs7qPhjTNTuk6cfI4m+taYt+VJSEJxE/JkcaG8IE3yr\ncmGZIl2hmqNHPgJuZfQoab0uhfEsSyxKxCV2OMtWFlvgj0gkXDdzLrFq02VE\naoPH0Gu76N31N8bPtzHDkkAni5gZeq51X+oVwk4VCK5BGE9xJclYYQfCgy3j\nUpgumAboZovA3iW+vKsharL+6+DGa1OY7QqCrIHM0vnlaOi4KNL9W2ZUaufj\ny9G+\r\n=5uxM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsDMzds/BsrObkaK5Ko+SFgnkBWghKhcm7bZdE+nNCGAiB5fIC6JN5mQl/XAy9dAX3zgN5VBPNK25t0rycjhdz9kQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.9_1579875288535_0.14878251156253675"},"_hasShrinkwrap":false},"6.0.0-alpha.2":{"name":"@storybook/addon-info","version":"6.0.0-alpha.2","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"6.0.0-alpha.2","@storybook/client-logger":"6.0.0-alpha.2","@storybook/components":"6.0.0-alpha.2","@storybook/theming":"6.0.0-alpha.2","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"779ef4791d9e2ec24cbaccff2e4b9a5f9b0327eb","readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","readmeFilename":"README.md","_id":"@storybook/addon-info@6.0.0-alpha.2","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-isr+LdrXVnJ2GODvrgyHN1pZF1lwDbSgCkLn9o04qe5SK9mP+3yyXjLinnF4KEfpc3WmQIffz3soZcqJ2osugw==","shasum":"2ee4e45f0692996afeeaa199ded5d6f3c3176383","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-6.0.0-alpha.2.tgz","fileCount":37,"unpackedSize":102309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMt0PCRA9TVsSAnZWagAAPNwP/22dy2M4/J3TP7CWg/wD\nNJlF3mqcLtAo9+b5jBJm1HYGbhZmlqEN5GAHGYwA3sQ7BVeOk4aZ9i0oRNCJ\nXjX/2fbg9gA+ggem0CkPkrWYLqOCHXIM55aykyG4lyKPpxgAZifdIMNsl5cY\n3UVnNm6W4uOgHAY5xDohsA/kQjxRhYPDtZy8g22LLTMNoT0x0s13TVuK53gf\nABjvOScHCpvNQiaLlec0FBsXXWMYtSdv4iEyOn8Uora9g2cFQFJmmE3PHzJf\n1aOJvPsRfJADtimJ2Op2o/t2r/sldob+T8nEkAnK8nXPodC8CLKj+ehO2K+o\naS8IdH20IaFufBOcAfG+0pkyUDoztlpwbVvohVVNkX6U6gLv/rjFg8Bn7Eqk\nlDjdHADdnuXOuEOOBKY5BNnS+qh+HqU921PbzrYQ/lcDLs9fffUqRcGKHOXR\n9DsOZSLZwAmKaIV7Xg1wZmY8OVBDqdwnFI0N8HyW/MQS8eu3zlDdLFpwLqbh\nAirYIoz5hJ7wDxwrVdc0FMevb2QbpSCyXISbbHgRBSLPdq+Ia4poKsJK+Ajr\n5q7suc465RmtuwkbKqE9KC13Vxmq9ZwDB0pVZMEHspf70sWavlNaaTM2edFR\nGFZ0aEKLg1RuJEB7Z+aXpFcU3U9FUKBj0JAELLYf4QsYJ1tn2LivRj8wrTeW\njzpY\r\n=4tFO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGr0znBsuRYJMwnzWqytXb6zHgXSmTiz8o8sFv1gJ2SEAiEAqilaeV24OPgvCkT1km4Bpu9xK8wVKggjbg2U85PZIjc="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_6.0.0-alpha.2_1580391694743_0.968323038496461"},"_hasShrinkwrap":false},"5.3.10":{"name":"@storybook/addon-info","version":"5.3.10","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.10","@storybook/client-logger":"5.3.10","@storybook/components":"5.3.10","@storybook/theming":"5.3.10","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"589bec8cb46cf8a32c887ac1d81fddc27e4aaac7","_id":"@storybook/addon-info@5.3.10","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-QvVP+4ZCNcf512VSzNOMs06nz1lB6b3j3GV8c+gYj6Q3A5wSi6XRvZbMdfdhGqCEzgoj2G2B/xVnubr3AyC43g==","shasum":"1aa34882223641f73da921561a3a7434cc9b4e93","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.10.tgz","fileCount":37,"unpackedSize":102436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNnRWCRA9TVsSAnZWagAA82IP/2o55tP/IxnhuOmqc82j\nushUEj5eSn5abZAMr8mbKHm+eLOLH/+ck4QlzPnS44pJf/U2HsFIUk5uJzp1\nUjZIg18C0ArbveBX1zwZmtmVbVYdkBtXQ99GLaMscW99xW7euxwu/X7+KjpQ\n/a6i/TwaO8DdtH4djILlh9lxBt8k5IbzNOV32bJvKmVAEDpWCHLjn5LdGFAy\nCwP9tmtDCYEMaGw/ornyLNLyV8P3O8xDo7/plCVWVem4WQtV7SGmk6FoU/Qz\nLYbhOpuMXIxeDVza/Q9mD5YC7sqX68pguC+zqAOoLsY/uqOd+/UySucPellV\npa8TYsLjFb3d6TpP/rodouSZiuLv6Y8F45m1wsykEHv9ulZCFQhpLiSdJy7/\neaCCXimOmM6XpmeVDigB8pVIF7nDyKUB5X6n62YpJKBehQUe+OT7hvueGelH\nIudvZT7U6JtjWJYVCC+NNlxNWuRNHS6mQIpOtYXbrJfJWehkpKhZ8TSSoqFI\nAVCOMU9LCL+eERmd+CDQZrBaoCzxgo9Klvbip8G0nri+I67sAs4T/ZSI/k6Z\nbnaxDJGxJMGkjm7Wd+q4s2rOm3xO36269gtyvFP/sjxtrSbo5BwW+DBWKsvF\na13KnF/loO6v8eznYMDZ1MdYC+viJqxbG6NR9TyASvzCzThJmLODgF+Bu5W2\ngFts\r\n=OaOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUOiXQJ/6Z7BS1ks+phafEG10a/W7nj4daMoCNbiIY0AiBF3BEjQNNn7URIhDd54MLzZDphiOmGzz1OaMN26qaM2w=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.10_1580627030213_0.9991461723647257"},"_hasShrinkwrap":false},"5.3.11":{"name":"@storybook/addon-info","version":"5.3.11","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.11","@storybook/client-logger":"5.3.11","@storybook/components":"5.3.11","@storybook/theming":"5.3.11","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"71b9291fad33bf92c66d4bf166e965f93d42a385","_id":"@storybook/addon-info@5.3.11","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-efXsXqT8C/Crswpx0Zk85grCY2ypesRw+xnoT/NJQ+rZGQaQ2eSE+R7kJkj+I3q4TBiCJ96GwGKjo7UTes+IiQ==","shasum":"a7256f2c9f1f8fffc7f86744a1496162d6b0211f","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.11.tgz","fileCount":37,"unpackedSize":102436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOZT7CRA9TVsSAnZWagAAWZwP/3PtJo7EhN4SU6xNbAss\nGMcAy159WrZkWcdvnfLP0GGgLh/3GhZMTz0a5tEP4tTigiUXHlnPq1V7YzBX\nrn1ercSnKM9XRpO77oHSYaL76QY4B/ShCGEGWHHPSo8PgQVQXGNYnsvWaZjt\npqlHfO/Yn7aCpRYlFXE7L56Ohi7aXjilJMVFrTZHh4lTK1JpMWVEK7FznxNZ\nT9HirHlmTDCS0BzUxKTYSMVeSmZpSraIBaJ3c0e1QUT+wf2k7XBgZpgLmSLJ\nyGNluTUYkoSGH2mY6JywTq5ATwWQxg3DQFrKbp68+AKlUU5ZEGwBJujrO40o\n3nr++q8pRM8g8pqEVGfiCNu1G1MAcIIqRYLhHFqZ8+VjSvls66+vkGud7qs+\nfubGp2KQpQcfm7D5fWwjQVC1wNgShSg831qkXZXViS2xJnTIhtUin82z0s/y\nQpLyTiBj3nc9KLHxZHhfY3PuLR4ZYtMaKoaV97ClFBhk/i0YmkJsoVJW/mkH\nnLPhmI1AFlkW1MZqpedhhmUq1I+/Eg6OTstmBjGOU6SkzxBrxB6Np5MWsC/z\nj1e6LcKAa9bSWYN5MkKsYDOheKbjrTnS048HbDsLlVUjcdPbqKVSFeAw7/30\nJMf62hdlqFXSscBxhJOiZo4WBCsY8Td4O0BQkVmT8sqB2sXBkWLKBNdB7zkq\nHxIl\r\n=vwDp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJdsEa3w3lJ8DhYcbqfWR3YcU7CjAsYx9sOmH+DtlrRAIgGqDYg/KaQ4tMylc5r4Bj7evNVPk4IpwOeOBhue5zUEw="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.11_1580831994976_0.5565964561616161"},"_hasShrinkwrap":false},"5.3.12":{"name":"@storybook/addon-info","version":"5.3.12","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.12","@storybook/client-logger":"5.3.12","@storybook/components":"5.3.12","@storybook/theming":"5.3.12","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"55b76e27762ac27ce9b872b8fa893cc8617fa25b","_id":"@storybook/addon-info@5.3.12","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-5dju7eJns4q3HY13qnWR9ey0iPxezrYAOhg4lFMHpw95PVEfoXbXS1pdSd2mP8BilcxmWlQ7Uo0HC8kYDOjtdQ==","shasum":"f2b90ff8fd4d5a5803319293400d3863c1701dca","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.12.tgz","fileCount":37,"unpackedSize":102436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOfyGCRA9TVsSAnZWagAArUoQAIjJfqYZnvAB0K+3D730\ndNzgIDkuQygcl7biifhYDZnLlhQwVNGDYxuB+jWLDibfudFJTRqn3lo+jpm9\nJc4C8/4nEVPZuYEiVrJ8oHP6k5usqeErTQ0nTWkqsxlBwRGLAWYTYjdTUL3K\nhTCj82yzeClrBpRvYewJbykuz/2TmRxDgVHo/lRGxJ/CgHOjCfMImDmzNA3n\nAjq9HkMmJF11SLUdIB7OK/Non1HmH+jnTc7DIyjp3TXqnZ0zs1LES3jhXzut\nb/JS6K/TUaV9a/3R6pqJDSAvzsK36qIKLf4uPkoXmAmlvTfvoaEVeeXiKmNJ\neFIxum4WxRs0xGBQprzKC6DCPXvLKEgZAAfzxukuBjNbQF7ujGfwE2nmb1Kb\nBi5SRhEHrrSLmzfReZqYMTcJD4ln2yFDMcb3p2sKeWWSFwhT64PucO5WbOeh\nruB7zt6Ga3p62ptXmZJGrbqwkg6Uek3aZKyCTqIeRhW6HllkQz1tJx1KFOY2\nGtcbE8DbwqoZ1hrqvwtUMV2psI5e3LeLq5yJmj2KWHvf0EIaANCzeeWD55AT\nrcmUBXTHbghgjb5i3i6XsK+zgyIJkzckuCadQ66ZLQ0LZfpoPlgi8ltcF5Wt\njskOYoF0vdnzsqS0ASLnflBgDNdG0u6JXZz+StHD5p3vNj7WxY0qCcDdboz8\nhsym\r\n=lyej\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLsFcho8OqSGuxNyo0tIde0qGzuxSL7OcveyQpSsymvwIhANUvwIWNQVfVi+F+FJa8P5YBtRMDga3hQVi523sPJWa1"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.12_1580858501544_0.8256665615957222"},"_hasShrinkwrap":false},"5.3.13":{"name":"@storybook/addon-info","version":"5.3.13","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.13","@storybook/client-logger":"5.3.13","@storybook/components":"5.3.13","@storybook/theming":"5.3.13","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"d840df052a887038e134207da26fd04cc2279d28","_id":"@storybook/addon-info@5.3.13","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-pH/ZJ/wuuZ2X1vxoLeO97/M4KVaWPt+YR6kY/abw+7Z1PG80DUW3saBcRmb+pexnBVReHe0MFAb3vo57l+MwCA==","shasum":"8b10bd5ae09390486ec48ce209eff0b6a2bb5b21","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.13.tgz","fileCount":37,"unpackedSize":102438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ3W5CRA9TVsSAnZWagAASi4P/RvPALJgct+UtKP1kydU\nmMs9xF5aT+pSqzKnZSEh5KyRVHrtjehj3GzX4r7DkOBnYJvyzm2ESt2oPSYX\nstfDLpPR3MbOzCSVbw1zGY8dNgKRsGbtu72ifqOFOMRBbcOEO7sf99tZoyr3\nKdz7ukSgCipoG4yScwlnDVmOYYUIShm1UYug+HMfiInf7WLDyAKwQjZRLrCv\nOnwO1PnWSvyZCZQl/0XyKbDWegoIQEKem4ThHm9BscwVV1U/QbqObxCC8L81\n7CNLcCeHtqt+p5bakv34h4Ftkzsir8E9KdZPgLClSRJlPmLDy7ZyXuUDm3hy\nFlTMVQ+Tgqa0vpfSiV8AMvGj/PyAttEkqVK4gh4lQEN7TTqyTOgOsA74pOEz\nOgQuyy1N+/Yy1NlB32jCwsj5D0F7xeEdqXgHSgUD7KyA5cVEDo4rm+3dC+aC\nPxtL2GKQVQwuLgC1OMEEDUr+WHmeoyswsRa1K/g2Tfj5j4fXNOCGl2jwHZOp\n4V7Fjc2EqridCX6B/CNNsiGCtbXJPZzaswCT+RTPvgTi8UMb3TdC1TUywXIC\nZgpS1S3Ke9E85RBRfaUzB3V/ECwzuatEdXegLpFKatr+NdOOGWmF5lDSDufi\nBSSCQZtOxgvnwgrjEjBoXRM9/wADrxrlmpAiBz9C2vf82mKgeSbwqCqs7tMi\ntI7O\r\n=8ZaO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp6hUqY3ByfMxyFzLF1fvKVvpxgBPYNU/46bPVIEgDrwIhAMAVfTqm+Aq/tzeqzdTqldQ24+gfthErVI4nUfQo2kkF"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.13_1581479352806_0.7616453360707622"},"_hasShrinkwrap":false},"5.3.14":{"name":"@storybook/addon-info","version":"5.3.14","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.14","@storybook/client-logger":"5.3.14","@storybook/components":"5.3.14","@storybook/theming":"5.3.14","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"91d9c0c4e0afd7e494b23ec8076b21e45b7a8906","_id":"@storybook/addon-info@5.3.14","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-xZCR1OmOIT2zz0r22PSMCUvcIqCWxTTpAc3R8ByJts9j/FxlvMerAgPYhZ8R9WNFEjG2Mszwyw66pU7Oj+qipg==","shasum":"2d5309f12816ff51c5a141616133a2701b39173b","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.14.tgz","fileCount":37,"unpackedSize":102456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVTsPCRA9TVsSAnZWagAAtHYP/jTgzk7rDQGCHmkDDAbQ\ny6D32GnHMuOOqI9iTG98XiisaERLiZrx5l5iRE6soPa2JJOUi5JlPTdC3z97\nNnnGsQzlABSE7nrijOM5/Dd18GjRmPqRLEFfVR0dSNFDlC3WETkt+T+0axvx\nZFOARjQKCVgibukO62H/9+h6rMuoSFi6nkBP2Sjh5qSJww22nF++eMFdw8hD\nsZoW2STUOVibMKoAPG3YPQgWSjOxBtAbImOzWSKzMA0wiSbR1rV+9GLNEH9b\njzYK6CprbHOmDIy+DopV3e15qSFN2a5bgjPQ14UlAaFcHmWToQ93GNBm69tl\nQdDgyk8KVYHVgmBXt0IRN+RQ/UEYvkRDaENDqdQ2tpNEHkNdHlo5dnBHPe7h\nDaj9tluc0uWqp9fVlEje+cF7P3kDJJqKnup6dzYmOZBH4EASXa1aqi8LKEvW\nZ6uPQvbgMTYEo9IE3/x4m/cyxNFa8q08yWtIPtL2nhO1Q0sYQPsQX7etSfHG\naqWxnqFApZfuYEDwMCSGNMpRBrWZ84Uhsq9wigKBGV7OkN6xy17d4zx4iREG\npxiFMzDvdQosX0H/XlIQq2ubdCwlQd/4MTUycHX6EhFqqPtspsK9PSOgymtx\npZasRTLa6XjO+NVgom1VnB/FrO6Gb6LdnrhmjbfqNvBvvzOfDI4ouc0iMEjt\n5c4C\r\n=8E4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEu3y17NX7wkWUXDanj9dksXoVgtZWZu05qu+9iDRP2jAiA4aYsKbBmtLBbyuI66aVA/p8fchDRzEVkcHyvykRi9ng=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.14_1582643982899_0.1976843853823882"},"_hasShrinkwrap":false},"5.3.15":{"name":"@storybook/addon-info","version":"5.3.15","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.15","@storybook/client-logger":"5.3.15","@storybook/components":"5.3.15","@storybook/theming":"5.3.15","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"db0e79bc999ab68611dc130d0f509ecd88e590c2","_id":"@storybook/addon-info@5.3.15","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-Axkk4XpPUrTAZEqXeSRpTQj8F/vQhQYOglJz86IgvxiSV+nzlp1P7J2P7+SxmC4EeQWWc+DRPS897+aleswj7g==","shasum":"b2806472eebd99b1ef48c7b853a3335c2d2590af","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.15.tgz","fileCount":37,"unpackedSize":102456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebFF6CRA9TVsSAnZWagAAgUsQAJ/QC6JR4jyGmpCdTSfj\njX2DPH1Kwas+45iRNVQzUYn4DY86xcuuQQhbhmL3Msl9c8tt6/WTf+UqQUOF\nDhcf/0w8nfNMgAv+zZarjPda4xPzwyuwD28RKutpGWraMcfTGgA+w9zj8PbU\n+OaQ/HyaDjdjniQi53sAQqzGrq1Sp/fs+Osz7vWJxxZkzm2ht1/8LjPTGZ8W\nbuWIQK0qV0gwKEavzdG8qvkxerE1h8kWx12c2iNZGw17vYf+z+gcJexhLfrC\nEPvaTcAmmuaS2Cct2X0fMK91gdq1tEw3/lhP793kH9jMEE64Gd3MMBn8zZSU\nuG/bO9r+czbOtb7oN5cxBq98nD3TDEzkmMrjaYsg2u6uj3igi7TabbcVIezB\nVgO7KRnCGOHt0bPf3lhWC4nuuP/EKaIfeNxiyhmXhEvKgdshCbcDo9i74m7M\nVJvtGZTXuMblTsKevoCmaPDZDzw+w3pChy63ofkJ/bmE0aaObbbrVYhexU9n\nIDHE+h8TTE0Up7TYmNMKwSgTXu6ycpW1tKHSspS6w741fCyREcClPkyDB5Rv\nKZztYyqEj/7D8JK8ObwADit7aw9alxMjjiWjQ2aZyhg9CVpP7EyyJIg52v9Z\ndNCLJlxqsCD1gQvnfE0cdF91KzQk6MSoODobLjbO4/6aJVfcdwOAGSQ/fKRt\nZz9B\r\n=ui4w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELvdJVzN7yIFqKtGcnybCGEjwp/uMyCj/Lv9JzN3UOxAiACVy+iBmSGIWi/b0esjZc3KjRRW40Shajzef3//4T3FQ=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.15_1584157050288_0.934080394992274"},"_hasShrinkwrap":false},"5.3.17":{"name":"@storybook/addon-info","version":"5.3.17","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.17","@storybook/client-logger":"5.3.17","@storybook/components":"5.3.17","@storybook/theming":"5.3.17","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"44e01ff253bb6c7de588d49659392f7bbdf4ad95","_id":"@storybook/addon-info@5.3.17","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-64+Prf+7t0MlrEmJplRwKNjXcZDqNFx+yNJ0kiWfR+Ueyq58kv5gawtImZnj2dRZNOR776GPVj30BlvaxK4jsA==","shasum":"39704362d5d9688ac3d9dce96b63b868103ec32c","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.17.tgz","fileCount":37,"unpackedSize":102456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebIv0CRA9TVsSAnZWagAAMIkP/1skYzk8bqCa4GUgXMg/\ne+Hz5obhkeDOsR7co5Rwro9eY3pifKZVM5Dkd2v0A9EMgsvuGyOxC+hknZyr\n3BE2CijcpKBL03ksRs55h+FHcmUkSN4IVV5lTc11z+oEB8FZ9k0zSDPgIwmz\nC0uiahQrVZkVZQG1FsKYfZuyo71uxa5/Gjn0B4JpFyydQXecTaWS8f0pB1wo\n9ZQAhLOq6BphyPaspgALta5oVi1CSHpMEN35oM0oS2mRJjxS9xUu0OXNmArn\nwUQP2tNf8DD+2cMc9GnaauB27/uPBmEegj3d1BVNQmrka8RDYhOl0UzvYf1G\n6DlwVoOKgkZms/KsMrmcLcPDbNvKF0t9oaVP+Q3tXWzxcv5T5yOJ+iNyxUnw\n3BVbPKRJnVq2HlxOHlYHBguCa6Bg0xZ2zwrt7GoEbMJcIrtcuOOHmX4RwJBP\n+w3AdGMOwa4mh66eV1T6wQ6EvAlkz1edm+DHQl281ja5yhqRzc0b3U4r11w5\nK4crGcYAZRhmutnBHTa3uu1PZAnM37+FLo29EIyWm+gldsOL6Cww7b+W18Qv\nD/ODNjx6rr0/9QNSBnYg0yqR6ixJHuCcq1yUL4Ulv7upF71olEsCD7LxAIM+\nmfbvNNdRrcWSbQk075Y4A1DucMYnNSjPqxoYn31aWq5pGvPi4G96SfrNbmt8\nVIKm\r\n=783/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvI+Wjvd2a924br4BA7eoZW78ObuqHIWntaUhkFGCpwAIhAN4SqGYF/S0c9KiZiwzNvj4HZxuoDSZNLPC8Iw6pHDsf"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.17_1584172020317_0.22085831363016073"},"_hasShrinkwrap":false},"5.3.18":{"name":"@storybook/addon-info","version":"5.3.18","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.18","@storybook/client-logger":"5.3.18","@storybook/components":"5.3.18","@storybook/theming":"5.3.18","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"ff445da08f82a7b0931647754394b4de0a2a34f9","_id":"@storybook/addon-info@5.3.18","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","dist":{"integrity":"sha512-6j+XlBrgHl1ZaFRSFdMYVeQTDWWs1Xhz2jflrLCLY4Y99+pLFBUigzp2EByfIVF9tiDfPwNcFcPo5UvQ+kTwOg==","shasum":"2b02c43eeb79770781eea82104c32a4f12a72da0","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.18.tgz","fileCount":37,"unpackedSize":102456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg0gZCRA9TVsSAnZWagAAF8oP/R9oq/rgiQ6BSiXkP8qt\n6Hm9tVeeKcOivHIje9zFRNt2IYWXjZFohTPOOmr/tRCjP5BnOz6UjCNI3Gx7\n29yJMKD57olNvyzHgfQyDUOcLCFhxhbtFlcTFWVGKxg8qG+AyupOCB6qijhS\nKU17wuv+hN5j83eGZSjeyOQKtVKrf8ZXRVTJ7jA4IDcXLtKphOhodoqhaPWR\nESoZlneqWroBA1RRAHV8IeQmqmOqNX3I/xl/GUYeLhcxgMa+0IjgwfDxaTmz\nfHGuDQYIZ9JUB0o88UW1wSfuGj/aFOZLpekOJuFmgvQJCnGgr83mMOvS/Eyc\nA9XRvn3xY8YcvMSP0WyKuQLC0k9wZ1U/RdydKGVHe7fIaqjLkJlQ0HiaT9Tc\nwGJSnfO3JOnoMWlGpMVgXkYGaZJWvRmNlzfHPuuKuKAjdfweSeodGPC1ALKI\nhfmXt6RmzJoD81lWjADYzfb79APwlgm83uj8uNoHOSnV7EFMMcNKJIAApbHo\nVrwsM+yeLpKqSmsDsm5/G/Z+AS7zw+gUUbotBhyVg1LrrxPOLRlggb99x0Ve\npe21Ldu9bgRmKMg8JX7FLEWDg5HovO3XygAXDX1mwuoQs06PJocksTTI+MuE\nfKhiLlvYlEjTCLIOM/KwPlVX4S4ZDz6FYPXv6FPQp79bUX5hVE7Ou2rHjH+H\nb85f\r\n=1BE2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuYAZs5Tf3VJr7lhIR3XPQod7b2fZD51C/ZFp85LQcUAiAxCKk9hxJUFwxIKBX7kVOQyoKUXtx4BpaTJouO03Jv5Q=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"wilsonc.alexander@gmail.com","name":"codebyalex"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.18_1585661976649_0.5099888296463586"},"_hasShrinkwrap":false},"5.3.19":{"name":"@storybook/addon-info","version":"5.3.19","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.19","@storybook/client-logger":"5.3.19","@storybook/components":"5.3.19","@storybook/theming":"5.3.19","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"e26136f29d99fdcec82a25689f0f7a10ef418fe1","_id":"@storybook/addon-info@5.3.19","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-MiFLcyoOmwawquagQHkqiPHnvBOKrVaS/wnO1XyBvIHwkK+KN7CZ9l7HakA4SO76kugrY9OJYyi5YvEEdN6vww==","shasum":"175af53ba54ddb8fe24b3c979206ffbbf42bc4f4","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.19.tgz","fileCount":37,"unpackedSize":102462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyfaoCRA9TVsSAnZWagAA+1QP/ix1EYAEdyth0e+wNkLy\nCVqPpxR5QyHqvUPZQ+Kg7IbGG+xX5ldVeuV1dyaHO8t5G7PkZPe5T9sjepDh\n3PxWxuelyixlyOPkEDok/YD+RQB5xNFmv+S+eOrZ0WuCLc0iM+HZKF3p9cV5\n7/8B6ozurtHnT8HjGh7FbkFtDt434bYrzA9WQY+GDcI6LqO1CEacg9BIzcGu\nd7vRKaGog5TsNtHhgAiExTl+QlhVbWpzh5R1BmwICia3p5m7jTprxVxe6faz\nGZRPjjsCbp1gqQhiw02Tf3iHjPm35NOwKCmMkS/s7I8WYrItILljE1cAtTOB\nkMc0Gj5lel04RFSQ+rrE1ejN0/NarZIrKYn6pf5Ym4rr81Y0s4/MutONQvBJ\n0zVlgAHFtYaUzIe931DbxtlZRZiebeT+kMTONGx5pE/t+C13XHId8C3JOd7Q\nxKfakZ/KwA1IMa+p/T7Oveuceg5AxQvcdauQuTAsJUrYsK6YqWu8U6JB85th\nWJccQ5mbMx3lQhsHFY1MASl9+DxFQ5/PZjfZuTbrRaVNAkwcKlJVpIBMmOeZ\nsBHEhO12UCh2O2aqb/TEHR1EjjR7SwQb5rQqTk3VAdtDwFh2V9d+BuooieSN\n58wT5/XzTpAefjvYFS5inotJ2uxXchnYdE9mjYylADoybsSg232fpA3aEsEN\nY7H3\r\n=C3uD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4QzaVhlAr9XOwDk5r8EcKKL3oBgEo7dDv9Pkc/HrqeAiA8EmxqC6b0sBoxnhUw/xt/E/iMg3dmPkYw2gTg09THNg=="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"wilsonc.alexander@gmail.com","name":"codebyalex"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.19_1590294184301_0.5789437762996166"},"_hasShrinkwrap":false},"5.3.20":{"name":"@storybook/addon-info","version":"5.3.20","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.20","@storybook/client-logger":"5.3.20","@storybook/components":"5.3.20","@storybook/theming":"5.3.20","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"966a826ccaed39fd9d9e9ab629cd745cbdd56d98","_id":"@storybook/addon-info@5.3.20","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-oloLuAR7Tf1bpbX7URSql5J0zW/pPZgUB6B0bG6ygbclndsZjmSJaX3Iui4Imt8TT5mckfX4TmGnJROF1VzKoQ==","shasum":"27198ede1189a720a758cb8f734e8a9362876056","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.20.tgz","fileCount":37,"unpackedSize":102462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRpTxCRA9TVsSAnZWagAAyFYP/iRByEo9BbTZl48mnl07\nbXP/mfvRHvum6Vt9CUAbNdJMKBLeUpE6GjYPe4sUBwr2kRdbAsE3Grs8vMMs\nfhN1t6k5KdFCjlXut7yfNdAbPC74ldu8kEVJhC/+oUYedxgwfGVD/efmrTsd\ng6D6O1iW93XavFk9g5wag9VTmok5WZoaBtpQoYiRz72H0hwnayxYvffI+Clp\nazaEky8kqug0PbffiHfeWFvaq49MiwGRKpmmB9m3kg+ettyULH5vnSHft6SH\n6rxnYAnjhAe3ZsA7DZYm0d013Xh/VmJPwsxQPte1QTsB8l1WnEKre6pglVBd\n3B/tnuFZh8yzHybmN2IJEhnFrpA3oLMEcpiU/An+MkRbMZPI9vbqkFetQQNw\nLSOv2ELxZf9pqPerQOcgrssiJhF5swWRPDwMtnWD1pBbpHKEu7CpJySrZjE5\naFY0aAkqSc4SyXUcMVCg2AFSAf/Yz2mf3CyF0mudCkQzIT1Sb+AfnXlq4LFe\nG9qASXnOhdQ6zGvd35HgTq9IL+m+0oBNgKH5B6Tw3bp/6s3PwLTR0DMJG+c8\nycs0q/sLUvII3sgzDHyp1SJqOaPR1pfWwg3E7LAg69Oj+TMmVzHROHoPjQSe\ntM2g2IKdgHxkr8nfKUWa/24GIoE/PzCkYUSOrzA3K7TtryA+QylZf/4RSI8v\nYos0\r\n=mQgY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJfJM/V2uFQXqusM2JUA6nf06rArxq9FwXoml6HbDFfwIhAKikWvnfQC29KSlWLqId0TaEaf8f5UHeAlyTtysSxjGs"}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"wilsonc.alexander@gmail.com","name":"codebyalex"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"danny.h.williams@hotmail.com","name":"dannyhw"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"mrmckeb.npm@outlook.com","name":"mrmckeb"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.20_1598461168810_0.7405382427630485"},"_hasShrinkwrap":false},"5.3.21":{"name":"@storybook/addon-info","version":"5.3.21","description":"A Storybook addon to show additional information for your stories.","keywords":["addon","storybook"],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"license":"MIT","main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"dependencies":{"@storybook/addons":"5.3.21","@storybook/client-logger":"5.3.21","@storybook/components":"5.3.21","@storybook/theming":"5.3.21","core-js":"^3.0.1","global":"^4.3.2","marksy":"^8.0.0","nested-object-assign":"^1.0.3","prop-types":"^15.7.2","react":"^16.8.3","react-addons-create-fragment":"^15.6.2","react-element-to-jsx-string":"^14.0.2","react-is":"^16.8.3","react-lifecycles-compat":"^3.0.4","util-deprecate":"^1.0.2"},"devDependencies":{"react-test-renderer":"^16.8.3"},"peerDependencies":{"react":"*"},"publishConfig":{"access":"public"},"gitHead":"a939e7204a448e9d24e5431f1c9dba8dd7ec05e9","_id":"@storybook/addon-info@5.3.21","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-A/K9HzmoXMuOUxH3AozTvjNZwTlYVHob2OaDRfMza0gYMzG0tOrxqcdNTigeAWAjS//Z0G3enue6rHulQZK/+g==","shasum":"fc8fd61d0471f4743b32f5ae8e5b7c84b52ff112","tarball":"https://registry.npmjs.org/@storybook/addon-info/-/addon-info-5.3.21.tgz","fileCount":37,"unpackedSize":102462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSEvcCRA9TVsSAnZWagAAWU8P/iOmRc6lRKjVfo9AIytY\n5Av6qz6XlttbfIdj2SUNO6kEkiSd8y2qZjRJBWjhbqFqzeeTLZhB/dc4+tep\nKrRlQBR312VTn2NSMoz2pZTjg16jpwD8S0L2+aeg1Zf6XttbGbJ/x0cmN5+8\nr4DqWY5EcJI8uY465QA5rDshfd7QQCwS942uLo4aW84KUPv9r/lYnnsxYSxA\nS+Bh7jgqw+BSWPxtOowEFhUwW9jD/ez9QQpGUtgxD7Y+pbCtMC0Iul+0bRXP\nXGH0FIGRWx3Q4ZdvAUbqFcyRW+yPlaeYEGEiDX3xTo+Qr1j9jyfLnPQ5t4z0\ncJhZIk6hTAEeeHfhoL+c1bZoNZeM6TPEFYNxnOxTHiK1sNhsECdYGXRZ2b+Y\n2gyHBE1nDAF85iJz7/PeyDaIl9x+YxQ8m8y5YfNLz3L6qjhzJR+es/1wxZYq\ni0dUWXhiJKWUgNhTUqER3ns0s/YRHsP4MV5JnZX3YaqoTbsmVz9hPpgnMcyX\nswTAyCOpv6rXqPoBNsSoU2Yroc9QE1P21qwZPTtZ/5ZZrQKILjY58eh99uJc\nXfd8G/IQV/7FdagRMRI98CxqcpClgdjYxKSSK/W664mZl7UySZYICgocTyBu\n9R+Hp/DAIelY4nVLc7e3kNjKLq3BI94uitm/edcHpYAHOf0EyfnJ7btjOh2I\nYJRt\r\n=0E+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMt8kX/GQAEmhNdJHBIBvcP2vYUy5kBOTr4aX82sHj4AIgfk5l8fPCzaUnq6CjwdUpKntNUEAf3qOmrhhdywWN8/4="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"wilsonc.alexander@gmail.com","name":"codebyalex"},{"email":"me@dandean.com","name":"dandean"},{"email":"dduan@yahoo.com","name":"danielduan"},{"email":"danny.h.williams@hotmail.com","name":"dannyhw"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"info@ghengeveld.nl","name":"ghengeveld"},{"email":"gytis.vinclovas@gmail.com","name":"gongreg"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"davydkin.igor@gmail.com","name":"igor-dv"},{"email":"susskyle@gmail.com","name":"kylesuss"},{"email":"mrmckeb.npm@outlook.com","name":"mrmckeb"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"patrick.gotthardt@trivago.com","name":"pago"},{"email":"pavan.sss1991@gmail.com","name":"pksunkara"},{"email":"michael@lab80.co","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"regx@usul.su","name":"usulpro"}],"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/addon-info_5.3.21_1598573532217_0.48602468883431826"},"_hasShrinkwrap":false}},"readme":"# Storybook Info Addon\n\nStorybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).\nUseful when you want to display usage or other types of documentation alongside your story.\n\n[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)\n\n![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/master/addons/info/docs/home-screenshot.png)\n\n## Installation\n\nInstall the following npm module:\n\n```sh\nnpm i -D @storybook/addon-info\n```\n\n## Basic usage\n\nThen, add `withInfo` as a decorator to your book of stories.\nIt is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.\n\nIt is important to declare this decorator as **the first decorator**, otherwise it won't work well.\n\n```js\n// Globally in your .storybook/preview.js.\nimport { addDecorator } from '@storybook/react';\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(withInfo); \n```\n\nor\n\n```js\nexport default {\n  title: 'Component',\n  decorators: [withInfo],\n};\n```\n\nThen, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.\nA complete list of possible configurations can be found [in a later section](#setting-global-options).\nThis can be done per book of stories:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n  parameters: {\n    info: {},\n  },\n};\n```\n\n...or for each story individually:\n\n```js\nimport Component from './Component';\n\nexport default {\n  title: 'Component',\n};\n\nexport const defaultView = () => <Component />;\ndefaultView.story = {\n  parameters: {\n    info: { inline: true },\n  },\n};\n```\n\nIt is also possible to disable the `info` addon entirely.\nDepending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.\n\n```\ninfo: {\n  disable: true,\n}\n```\n\n## Markdown\n\nThe `info` addon also supports markdown.\nTo use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.\n\n```js\ninfo: {\n  text: `\n    description or documentation about my component, supports markdown\n\n    ~~~js\n    <Button>Click Here</Button>\n    ~~~\n  `,\n}\n```\n\n## Setting Global Options\n\nTo configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.\n\n```js\nimport { withInfo } from '@storybook/addon-info';\n\naddDecorator(\n  withInfo({\n    header: false,\n  })\n);\n```\n\nConfiguration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.\nIn order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.\n\n## Options and Defaults\n\n```js\n{\n  /**\n   * Text to display with storybook component\n   */\n  text?: string;\n  /**\n   * Displays info inline vs click button to view\n   * @default false\n   */\n  inline: boolean,\n  /**\n   * Toggles display of header with component name and description\n   * @default true\n   */\n  header: boolean,\n  /**\n   * Displays the source of story Component\n   * @default true\n   */\n  source: boolean,\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType>,\n  /**\n   * Overrides styles of addon. The object should follow this shape:\n   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.\n   * This prop can also accept a function which has the default stylesheet passed as an argument\n   */\n  styles: Object | Function,\n  /**\n   * Overrides components used to display markdown\n   * @default {}\n   */\n  components: { [key: string]: React.ComponentType },\n  /**\n   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n  {\n    propDefinitions: Array<{\n      property: string, // The name of the prop\n      propType: Object | string, // The prop type. TODO: info about what this object is...\n      required: boolean, // True if the prop is required\n      description: string, // The description of the prop\n      defaultValue: any // The default value of the prop\n    }>\n  }\n```\n\nExample:\n\n```js\n// button.js\n// @flow\nimport React from 'react';\n\nconst paddingStyles = {\n  small: '4px 8px',\n  medium: '8px 16px',\n};\n\nconst Button = ({\n  size,\n  ...rest\n}: {\n  /** The size of the button */\n  size: 'small' | 'medium',\n}) => {\n  const style = {\n    padding: paddingStyles[size] || '',\n  };\n  return <button style={style} {...rest} />;\n};\nButton.defaultProps = {\n  size: 'medium',\n};\n\nexport default Button;\n```\n\n```js\n// stories.js\nimport React from 'react';\n\nimport { storiesOf } from '@storybook/react';\nimport Button from './button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  parameters: {\n    info: TableComponent,\n  },\n};\n\nconst Red = props => <span style={{ color: 'red' }} {...props} />;\n\nconst TableComponent = ({ propDefinitions }) => {\n  const props = propDefinitions.map(\n    ({ property, propType, required, description, defaultValue }) => {\n      return (\n        <tr key={property}>\n          <td>\n            {property}\n            {required ? <Red>*</Red> : null}\n          </td>\n          <td>{propType.name}</td>\n          <td>{defaultValue}</td>\n          <td>{description}</td>\n        </tr>\n      );\n    }\n  );\n\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>name</th>\n          <th>type</th>\n          <th>default</th>\n          <th>description</th>\n        </tr>\n      </thead>\n      <tbody>{props}</tbody>\n    </table>\n  );\n};\n\nexport const defaultView = () => <Button />;\n```\n\n### React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.\nWhen rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/** Button component description */\nconst DocgenButton = ({ disabled, label, style, onClick }) => (\n  <button disabled={disabled} style={style} onClick={onClick}>\n    {label}\n  </button>\n);\n\nDocgenButton.defaultProps = {\n  disabled: false,\n  onClick: () => {},\n  style: {},\n};\n\nDocgenButton.propTypes = {\n  /** Boolean indicating whether the button should render as disabled */\n  disabled: PropTypes.bool,\n  /** button label. */\n  label: PropTypes.string.isRequired,\n  /** onClick handler */\n  onClick: PropTypes.func,\n  /** component styles */\n  style: PropTypes.shape,\n};\n\nexport default DocgenButton;\n```\n\nComments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.\n\n## The FAQ\n\n**Components lose their names on static build**\n\nComponent names also get minified with other javascript code when building for production.\nWhen creating components, set the `displayName` static property to show the correct component name on static builds.\n","maintainers":[],"time":{"modified":"2022-06-13T00:26:28.105Z","created":"2017-05-17T20:03:29.702Z","3.0.0-alpha.0":"2017-05-17T20:03:29.702Z","3.0.0-alpha.1":"2017-05-19T20:41:11.325Z","3.0.0-alpha.3":"2017-05-21T18:04:22.263Z","3.0.0-alpha.4":"2017-05-22T22:09:46.171Z","3.0.0-alpha.5":"2017-05-24T03:05:01.074Z","3.0.0-rc.0":"2017-05-25T16:29:10.011Z","3.0.0-rc.2":"2017-05-27T11:47:54.380Z","3.0.0-rc.3":"2017-05-30T08:47:36.241Z","3.0.0":"2017-05-30T13:40:46.080Z","3.0.1":"2017-06-05T12:59:06.949Z","3.1.2":"2017-06-09T11:54:39.905Z","3.1.3":"2017-06-10T11:47:45.213Z","3.1.4":"2017-06-15T12:08:35.041Z","3.1.5":"2017-06-22T06:37:36.859Z","3.1.6":"2017-06-26T06:33:49.991Z","3.1.9":"2017-07-16T20:50:26.049Z","3.2.0-alpha.8":"2017-07-20T20:30:42.594Z","3.2.0-alpha.10":"2017-07-27T08:07:48.069Z","3.2.0-alpha.13":"2017-07-31T00:19:36.883Z","3.2.0":"2017-07-31T14:13:22.296Z","3.2.4":"2017-08-12T23:59:36.763Z","3.2.5":"2017-08-17T04:51:07.587Z","3.2.6-alpha.0":"2017-08-22T07:33:00.391Z","3.2.6":"2017-08-22T18:03:23.169Z","3.2.7":"2017-08-23T16:24:20.509Z","3.2.9":"2017-08-26T15:56:40.950Z","3.3.0-alpha.0":"2017-09-06T20:47:01.358Z","3.2.10":"2017-09-22T21:43:22.586Z","3.2.11":"2017-09-26T22:53:56.730Z","3.3.0-alpha.1":"2017-10-02T18:59:00.823Z","3.2.12":"2017-10-02T22:31:24.842Z","3.3.0-alpha.2":"2017-10-03T20:12:17.153Z","3.2.13":"2017-10-20T19:45:47.384Z","3.2.14":"2017-11-01T07:22:23.321Z","3.3.0-alpha.3":"2017-11-07T03:57:54.734Z","3.2.15":"2017-11-10T02:40:59.011Z","3.2.16":"2017-11-16T02:04:25.592Z","3.3.0-alpha.4":"2017-11-22T11:16:19.083Z","3.2.17":"2017-12-03T19:59:49.516Z","3.2.18":"2017-12-18T21:59:37.657Z","3.3.0-alpha.6":"2017-12-23T17:26:56.212Z","3.2.19":"2017-12-23T17:59:25.688Z","3.3.0-rc.0":"2017-12-24T04:21:41.311Z","3.3.0-rc.1":"2017-12-26T17:50:18.937Z","3.3.0":"2017-12-26T23:59:04.059Z","3.3.1":"2017-12-27T03:31:33.196Z","3.3.2":"2017-12-28T03:12:18.521Z","3.3.3":"2017-12-28T17:07:37.638Z","3.3.4":"2018-01-07T12:56:37.398Z","3.4.0-alpha.0":"2018-01-07T16:05:59.400Z","3.3.5":"2018-01-08T03:43:37.257Z","3.3.6":"2018-01-08T10:43:26.337Z","3.3.7":"2018-01-10T06:37:17.934Z","3.4.0-alpha.1":"2018-01-10T07:10:09.397Z","3.3.8":"2018-01-11T12:19:01.219Z","3.4.0-alpha.2":"2018-01-11T12:47:47.356Z","3.3.9":"2018-01-13T07:39:16.402Z","3.4.0-alpha.3":"2018-01-13T12:42:49.688Z","3.4.0-alpha.4":"2018-01-13T13:05:43.371Z","3.3.10":"2018-01-19T11:28:54.348Z","3.4.0-alpha.5":"2018-01-19T12:53:30.175Z","3.3.11":"2018-01-27T06:41:33.086Z","3.4.0-alpha.6":"2018-01-27T07:17:08.623Z","3.3.12":"2018-02-03T02:24:18.217Z","3.4.0-alpha.7":"2018-02-03T02:55:47.602Z","3.3.13":"2018-02-11T06:13:26.232Z","3.4.0-alpha.8":"2018-02-11T06:58:20.416Z","3.3.14":"2018-02-21T08:39:31.499Z","3.4.0-alpha.9":"2018-02-22T08:46:23.822Z","3.3.15":"2018-03-07T09:57:45.824Z","3.4.0-rc.0":"2018-03-08T03:04:40.213Z","3.4.0-rc.1":"2018-03-13T10:35:44.050Z","3.4.0-rc.2":"2018-03-13T11:01:52.100Z","3.4.0-rc.3":"2018-03-19T23:04:24.290Z","3.4.0-rc.4":"2018-03-29T04:26:03.399Z","4.0.0-alpha.0":"2018-03-29T05:34:14.084Z","4.0.0-alpha.1":"2018-03-29T15:28:50.876Z","3.4.0":"2018-03-30T23:44:31.056Z","3.4.1":"2018-04-10T22:34:02.309Z","4.0.0-alpha.2":"2018-04-11T00:40:51.110Z","3.4.2":"2018-04-17T23:14:10.658Z","4.0.0-alpha.3":"2018-04-17T23:51:34.134Z","3.4.3":"2018-04-27T19:09:23.570Z","4.0.0-alpha.4":"2018-04-27T19:45:27.081Z","3.4.4":"2018-05-12T19:48:16.956Z","4.0.0-alpha.6":"2018-05-12T20:33:31.101Z","3.4.5":"2018-05-17T22:12:47.243Z","4.0.0-alpha.7":"2018-05-17T23:03:54.249Z","3.4.6":"2018-05-27T00:39:27.150Z","4.0.0-alpha.8":"2018-05-27T01:48:20.598Z","3.4.7":"2018-06-10T04:29:25.811Z","4.0.0-alpha.9":"2018-06-10T07:44:28.775Z","3.4.8":"2018-06-21T13:04:19.429Z","4.0.0-alpha.10":"2018-06-21T13:51:33.196Z","4.0.0-alpha.11":"2018-07-02T18:16:01.364Z","4.0.0-alpha.12":"2018-07-03T23:00:34.260Z","4.0.0-alpha.13":"2018-07-10T04:34:24.576Z","4.0.0-alpha.14":"2018-07-12T00:16:14.725Z","3.4.10":"2018-08-03T09:27:04.379Z","4.0.0-alpha.15":"2018-08-03T09:59:35.066Z","4.0.0-alpha.16":"2018-08-06T14:29:04.161Z","4.0.0-alpha.17":"2018-08-24T18:43:11.876Z","4.0.0-alpha.18":"2018-08-25T20:59:23.845Z","4.0.0-alpha.20":"2018-08-31T23:03:26.975Z","4.0.0-alpha.21":"2018-09-07T17:20:39.147Z","3.4.11":"2018-09-17T23:01:20.121Z","4.0.0-alpha.22":"2018-09-19T21:03:55.499Z","4.0.0-alpha.23":"2018-09-25T22:44:05.962Z","4.0.0-alpha.24":"2018-10-04T08:27:51.708Z","4.0.0-alpha.25":"2018-10-13T09:40:13.176Z","4.0.0-rc.0":"2018-10-15T15:43:14.053Z","4.0.0-rc.1":"2018-10-18T01:57:03.639Z","4.0.0-rc.2":"2018-10-22T13:42:39.641Z","4.0.0-rc.3":"2018-10-23T16:22:21.667Z","4.0.0-rc.4":"2018-10-25T02:58:12.783Z","4.0.0-rc.5":"2018-10-25T03:45:05.474Z","4.0.0-rc.6":"2018-10-25T04:38:53.498Z","4.0.0":"2018-10-29T02:33:30.595Z","4.0.1":"2018-10-31T07:14:26.719Z","4.0.2":"2018-10-31T08:51:02.536Z","4.0.3":"2018-11-06T04:53:58.210Z","4.0.4":"2018-11-06T05:40:59.265Z","4.1.0-alpha.1":"2018-11-06T09:18:47.043Z","4.0.6":"2018-11-13T11:16:24.689Z","4.1.0-alpha.2":"2018-11-13T11:36:38.779Z","4.0.7":"2018-11-15T13:35:00.094Z","4.1.0-alpha.3":"2018-11-15T14:14:38.710Z","4.0.8":"2018-11-21T10:04:31.287Z","4.1.0-alpha.4":"2018-11-21T10:46:20.660Z","4.1.0-alpha.5":"2018-11-22T03:58:15.303Z","4.1.0-alpha.6":"2018-11-22T04:09:36.690Z","4.1.0-alpha.7":"2018-11-22T04:36:37.513Z","4.1.0-alpha.8":"2018-11-25T02:04:03.405Z","4.0.9":"2018-11-25T15:31:30.957Z","4.1.0-alpha.9":"2018-11-29T09:51:59.773Z","4.1.0-alpha.10":"2018-12-01T03:27:29.379Z","4.0.10":"2018-12-01T22:50:39.097Z","4.0.11":"2018-12-03T02:49:05.347Z","4.1.0-alpha.11":"2018-12-05T19:14:33.510Z","4.0.12":"2018-12-05T19:29:51.152Z","4.1.0-alpha.12":"2018-12-11T17:32:13.236Z","4.1.0-alpha.13":"2018-12-12T17:47:32.670Z","4.1.0":"2018-12-12T19:02:52.469Z","4.1.1":"2018-12-13T01:23:52.781Z","4.2.0-alpha.0":"2018-12-13T01:43:52.699Z","4.2.0-alpha.1":"2018-12-13T02:02:14.229Z","4.1.2":"2018-12-16T15:23:12.436Z","4.2.0-alpha.2":"2018-12-16T16:39:35.972Z","4.2.0-alpha.3":"2018-12-18T15:06:07.417Z","4.2.0-alpha.4":"2018-12-19T07:24:51.021Z","4.2.0-alpha.5":"2018-12-19T16:07:59.499Z","4.2.0-cra-debug.0":"2018-12-20T01:49:06.754Z","4.1.3":"2018-12-20T08:22:02.647Z","4.2.0-alpha.6":"2018-12-20T22:24:16.460Z","4.2.0-alpha.7":"2018-12-25T20:34:10.627Z","4.1.4":"2018-12-25T21:12:15.089Z","4.2.0-alpha.8":"2018-12-28T03:20:27.268Z","4.2.0-alpha.9":"2019-01-04T04:40:28.479Z","4.2.0-alpha.10":"2019-01-06T11:00:42.226Z","5.0.0-debug.0":"2019-01-07T15:03:16.935Z","4.1.5-react-debug.0":"2019-01-09T03:35:49.787Z","4.1.5-react-debug.1":"2019-01-09T04:35:56.732Z","4.1.5":"2019-01-09T07:01:06.035Z","4.1.6":"2019-01-09T07:08:46.668Z","4.2.0-alpha.11":"2019-01-09T10:05:34.676Z","5.0.0-debug.1":"2019-01-09T10:51:51.213Z","5.0.0-debug.2":"2019-01-12T05:29:36.455Z","5.0.0-debug.3":"2019-01-12T07:27:40.232Z","5.0.0-alpha.0":"2019-01-13T07:18:09.002Z","5.0.0-alpha.1":"2019-01-14T15:47:04.739Z","5.0.0-alpha.2":"2019-01-16T02:56:10.410Z","5.0.0-alpha.3":"2019-01-16T04:16:34.895Z","5.0.0-alpha.4":"2019-01-16T17:10:46.459Z","5.0.0-alpha.5":"2019-01-17T08:46:48.091Z","4.1.7":"2019-01-17T14:16:34.015Z","5.0.0-alpha.6":"2019-01-18T16:08:18.494Z","5.0.0-alpha.7":"2019-01-20T08:49:33.902Z","5.0.0-alpha.8":"2019-01-22T09:13:47.810Z","4.1.8":"2019-01-23T10:31:44.194Z","4.1.9":"2019-01-23T10:51:32.991Z","5.0.0-alpha.9":"2019-01-23T13:41:59.351Z","4.1.10":"2019-01-24T14:37:08.787Z","4.1.11":"2019-01-24T14:50:35.640Z","5.0.0-alpha.10":"2019-01-28T04:49:54.477Z","5.0.0-alpha.11":"2019-01-31T18:41:23.717Z","5.0.0-beta.1":"2019-02-01T06:44:44.922Z","5.0.0-beta.2":"2019-02-09T03:33:43.068Z","5.0.0-beta.3":"2019-02-13T03:26:13.119Z","5.0.0-beta.4":"2019-02-15T08:29:56.717Z","5.0.0-rc.0":"2019-02-16T14:52:55.075Z","5.0.0-rc.1":"2019-02-16T16:11:16.309Z","4.1.12":"2019-02-18T09:41:15.738Z","5.0.0-rc.2":"2019-02-19T07:26:55.791Z","5.0.0-rc.3":"2019-02-19T11:25:38.644Z","4.1.13":"2019-02-21T08:01:55.248Z","5.0.0-rc.4":"2019-02-21T10:18:34.338Z","5.0.0-rc.5":"2019-02-23T08:56:50.620Z","5.0.0-rc.6":"2019-02-25T16:08:17.875Z","5.0.0-rc.7":"2019-02-27T17:36:18.331Z","5.0.0-rc.8":"2019-03-01T17:24:11.254Z","5.0.0-rc.9":"2019-03-03T06:29:14.716Z","5.0.0-rc.10":"2019-03-04T06:32:10.372Z","5.0.0-rc.11":"2019-03-05T02:17:54.637Z","5.0.0":"2019-03-05T07:48:39.478Z","5.1.0-alpha.0":"2019-03-06T02:43:54.686Z","5.1.0-alpha.1":"2019-03-07T14:17:00.311Z","5.1.0-alpha.2":"2019-03-08T10:39:55.049Z","4.1.14":"2019-03-08T15:17:01.260Z","5.0.1":"2019-03-08T16:27:17.804Z","5.1.0-alpha.3":"2019-03-09T15:28:44.072Z","5.1.0-alpha.4":"2019-03-11T14:33:40.230Z","5.1.0-alpha.5":"2019-03-12T21:29:17.461Z","5.1.0-alpha.6":"2019-03-14T00:58:25.532Z","5.1.0-alpha.7":"2019-03-16T07:18:07.165Z","5.0.2":"2019-03-17T05:03:53.059Z","5.1.0-alpha.8":"2019-03-17T15:32:03.888Z","5.1.0-alpha.9":"2019-03-18T09:33:11.693Z","5.0.3":"2019-03-18T11:11:29.991Z","5.1.0-alpha.10":"2019-03-19T13:40:25.710Z","5.1.0-alpha.11":"2019-03-20T20:35:55.759Z","5.1.0-alpha.12":"2019-03-22T04:32:02.567Z","5.1.0-alpha.13":"2019-03-23T05:23:09.194Z","4.1.16":"2019-03-24T07:31:11.800Z","5.0.4":"2019-03-24T08:10:14.726Z","3.4.12":"2019-03-24T12:51:16.645Z","5.0.5":"2019-03-24T23:05:44.124Z","5.1.0-alpha.14":"2019-03-25T15:34:02.294Z","5.1.0-alpha.15":"2019-03-26T03:10:47.075Z","5.1.0-alpha.16":"2019-03-26T10:44:16.064Z","5.1.0-alpha.17":"2019-03-26T13:04:54.768Z","5.1.0-alpha.18":"2019-03-26T23:37:45.539Z","5.1.0-alpha.19":"2019-03-28T03:23:43.406Z","5.1.0-alpha.20":"2019-03-29T02:06:09.988Z","5.0.6":"2019-04-01T04:45:15.539Z","5.1.0-alpha.21":"2019-04-04T15:36:47.545Z","5.1.0-alpha.22":"2019-04-05T13:45:23.169Z","5.1.0-alpha.23":"2019-04-08T10:26:12.574Z","5.1.0-alpha.24":"2019-04-09T02:15:47.140Z","5.1.0-alpha.25":"2019-04-11T22:57:48.646Z","5.1.0-alpha.26":"2019-04-13T01:05:51.917Z","5.1.0-alpha.27":"2019-04-14T01:24:32.290Z","5.0.7":"2019-04-14T02:07:37.055Z","4.1.18":"2019-04-15T07:16:46.492Z","5.0.8":"2019-04-15T07:39:06.830Z","5.1.0-alpha.28":"2019-04-16T10:44:40.260Z","5.0.9":"2019-04-17T00:01:56.422Z","5.1.0-alpha.29":"2019-04-17T08:32:10.684Z","5.1.0-alpha.30":"2019-04-18T01:22:58.041Z","5.0.10":"2019-04-18T06:09:16.800Z","5.1.0-alpha.31":"2019-04-19T04:59:51.120Z","5.1.0-alpha.32":"2019-04-22T03:20:37.096Z","5.1.0-alpha.33":"2019-04-23T06:30:05.216Z","5.1.0-alpha.34":"2019-04-24T15:06:54.466Z","5.1.0-alpha.35":"2019-04-26T17:32:54.336Z","5.1.0-alpha.36":"2019-04-27T05:14:34.088Z","5.0.11":"2019-04-28T03:14:31.710Z","5.2.0-alpha.0":"2019-04-29T14:30:00.490Z","5.2.0-alpha.1":"2019-04-30T10:41:08.207Z","5.2.0-alpha.2":"2019-04-30T12:04:45.759Z","5.2.0-alpha.3":"2019-05-01T09:19:07.846Z","5.1.0-alpha.37":"2019-05-01T11:02:03.374Z","5.1.0-alpha.39":"2019-05-02T06:39:31.328Z","5.1.0-alpha.40":"2019-05-08T15:36:13.212Z","5.1.0-beta.0":"2019-05-10T08:50:56.534Z","5.2.0-alpha.4":"2019-05-11T06:24:22.865Z","5.2.0-alpha.5":"2019-05-12T09:07:43.064Z","5.2.0-alpha.6":"2019-05-14T17:18:56.820Z","5.2.0-alpha.7":"2019-05-15T09:42:40.505Z","5.2.0-alpha.8":"2019-05-15T13:59:20.983Z","5.1.0-beta.1":"2019-05-16T06:02:33.499Z","5.2.0-alpha.9":"2019-05-17T09:13:18.810Z","5.2.0-alpha.10":"2019-05-20T07:49:24.730Z","5.1.0-rc.0":"2019-05-21T11:12:42.776Z","5.2.0-alpha.11":"2019-05-21T13:59:07.624Z","5.2.0-alpha.12":"2019-05-21T15:53:36.540Z","5.2.0-alpha.13":"2019-05-25T00:15:58.221Z","5.1.0-rc.1":"2019-05-25T01:02:24.558Z","5.2.0-alpha.14":"2019-05-25T22:33:29.377Z","5.2.0-alpha.15":"2019-05-26T00:43:59.690Z","5.2.0-alpha.16":"2019-05-26T06:13:46.331Z","5.2.0-alpha.17":"2019-05-26T16:56:48.684Z","5.2.0-alpha.18":"2019-05-27T05:38:14.207Z","5.1.0-rc.2":"2019-05-27T14:19:16.782Z","5.2.0-alpha.19":"2019-05-29T04:24:54.715Z","5.1.0-rc.3":"2019-05-30T06:21:04.985Z","5.2.0-alpha.20":"2019-06-01T08:36:16.903Z","5.2.0-alpha.21":"2019-06-03T02:43:37.181Z","5.1.0-rc.4":"2019-06-03T06:41:01.535Z","5.1.0-rc.5":"2019-06-04T18:01:29.149Z","5.1.1":"2019-06-05T08:33:55.329Z","5.1.3":"2019-06-06T21:25:45.310Z","5.2.0-alpha.22":"2019-06-07T15:08:26.851Z","5.2.0-alpha.23":"2019-06-11T03:26:54.545Z","5.2.0-alpha.24":"2019-06-13T06:26:25.535Z","5.1.4":"2019-06-13T07:12:38.972Z","5.1.5":"2019-06-13T22:10:24.964Z","5.1.6":"2019-06-13T23:22:08.859Z","5.1.7":"2019-06-13T23:39:14.655Z","5.2.0-alpha.26":"2019-06-14T12:12:41.419Z","5.1.8":"2019-06-14T12:29:59.950Z","5.2.0-alpha.27":"2019-06-16T22:55:22.714Z","5.2.0-alpha.28":"2019-06-17T15:01:52.643Z","5.2.0-alpha.29":"2019-06-17T15:25:12.485Z","5.1.9":"2019-06-20T00:35:30.138Z","5.2.0-alpha.30":"2019-06-25T12:24:00.213Z","5.2.0-alpha.31":"2019-06-27T04:34:22.740Z","5.2.0-alpha.32":"2019-06-29T03:31:07.295Z","5.2.0-alpha.33":"2019-07-01T11:17:18.301Z","5.2.0-alpha.34":"2019-07-02T01:37:31.872Z","5.2.0-alpha.35":"2019-07-02T16:27:09.768Z","5.2.0-alpha.36":"2019-07-05T10:18:42.778Z","5.2.0-alpha.37":"2019-07-08T05:09:15.554Z","5.2.0-alpha.38":"2019-07-08T18:40:14.830Z","5.2.0-alpha.39":"2019-07-10T02:48:06.642Z","5.2.0-alpha.40":"2019-07-10T13:17:39.134Z","5.2.0-alpha.41":"2019-07-11T00:06:19.146Z","5.2.0-alpha.42":"2019-07-12T03:41:36.151Z","5.2.0-alpha.43":"2019-07-13T13:55:15.326Z","5.2.0-alpha.44":"2019-07-15T01:36:36.116Z","5.2.0-beta.0":"2019-07-15T12:55:12.021Z","5.2.0-beta.1":"2019-07-18T02:14:00.728Z","5.2.0-beta.2":"2019-07-18T14:25:39.338Z","5.2.0-beta.3":"2019-07-19T12:22:17.281Z","5.2.0-beta.4":"2019-07-20T04:45:39.412Z","5.2.0-beta.5":"2019-07-21T02:03:42.419Z","5.2.0-beta.6":"2019-07-22T18:09:24.152Z","5.2.0-beta.7":"2019-07-23T09:59:52.840Z","5.2.0-beta.8":"2019-07-25T10:25:58.379Z","5.2.0-beta.9":"2019-07-25T17:17:36.582Z","5.2.0-beta.10":"2019-07-26T11:52:21.601Z","5.2.0-beta.12":"2019-07-27T01:53:12.362Z","5.2.0-beta.13":"2019-07-27T08:41:34.268Z","5.2.0-beta.14":"2019-07-29T04:34:17.207Z","5.2.0-beta.15":"2019-07-29T04:50:38.143Z","5.2.0-beta.16":"2019-07-29T08:31:38.497Z","5.2.0-beta.17":"2019-07-29T11:07:49.922Z","5.2.0-beta.18":"2019-07-29T23:44:18.448Z","5.1.10":"2019-07-31T08:57:59.848Z","5.2.0-beta.19":"2019-07-31T09:22:27.890Z","5.2.0-beta.20":"2019-08-01T15:45:41.978Z","5.2.0-beta.21":"2019-08-02T16:29:40.780Z","5.2.0-beta.22":"2019-08-03T04:10:42.598Z","5.2.0-beta.23":"2019-08-05T16:39:58.609Z","5.2.0-beta.24":"2019-08-07T03:20:00.779Z","5.2.0-beta.25":"2019-08-08T02:00:10.423Z","5.2.0-beta.26":"2019-08-09T02:38:51.503Z","5.2.0-beta.27":"2019-08-10T12:26:06.058Z","5.2.0-beta.28":"2019-08-10T12:44:45.914Z","5.2.0-beta.29":"2019-08-13T01:21:40.474Z","5.1.11":"2019-08-13T01:54:54.954Z","5.2.0-beta.30":"2019-08-14T08:02:17.840Z","5.2.0-beta.31":"2019-08-16T10:17:06.356Z","5.2.0-beta.32":"2019-08-17T13:44:56.915Z","5.2.0-beta.33":"2019-08-18T13:46:39.350Z","5.2.0-beta.36":"2019-08-19T19:24:48.183Z","5.2.0-beta.37":"2019-08-20T08:05:17.260Z","5.2.0-beta.38":"2019-08-20T16:09:50.434Z","5.2.0-beta.39":"2019-08-22T03:33:10.289Z","5.2.0-beta.40":"2019-08-23T14:53:28.591Z","5.2.0-beta.41":"2019-08-27T16:01:12.828Z","5.2.0-beta.42":"2019-08-27T16:29:34.705Z","5.2.0-beta.43":"2019-08-28T00:06:21.521Z","5.2.0-beta.45":"2019-08-28T12:29:11.234Z","5.2.0-beta.46":"2019-08-29T03:43:20.797Z","5.2.0-beta.47":"2019-08-29T16:50:07.469Z","5.2.0-beta.48":"2019-08-30T04:18:18.973Z","5.2.0-rc.0":"2019-08-30T06:43:25.580Z","5.2.0-rc.1":"2019-08-31T02:57:22.106Z","5.2.0-rc.2":"2019-09-01T05:59:00.683Z","5.2.0-rc.4":"2019-09-03T09:55:55.959Z","5.2.0-rc.5":"2019-09-04T02:50:38.189Z","5.2.0-rc.6":"2019-09-05T06:51:11.658Z","5.2.0-rc.8":"2019-09-07T05:22:01.018Z","5.2.0-rc.9":"2019-09-08T04:56:35.334Z","5.2.0-rc.10":"2019-09-09T21:59:24.044Z","5.2.0-rc.11":"2019-09-10T20:41:51.695Z","5.2.0":"2019-09-14T03:51:31.874Z","5.3.0-alpha.0":"2019-09-17T04:15:12.150Z","5.2.1":"2019-09-17T16:28:40.451Z","5.3.0-alpha.1":"2019-09-24T03:55:37.352Z","5.3.0-alpha.2":"2019-09-24T13:45:26.256Z","5.3.0-alpha.3":"2019-09-25T18:38:23.634Z","5.3.0-alpha.4":"2019-09-27T06:12:29.424Z","5.3.0-alpha.5":"2019-09-28T06:52:57.105Z","5.3.0-alpha.6":"2019-10-01T22:12:15.163Z","5.3.0-alpha.7":"2019-10-03T07:05:00.622Z","5.3.0-alpha.8":"2019-10-04T07:22:04.163Z","5.3.0-alpha.9":"2019-10-04T07:42:49.848Z","5.3.0-alpha.10":"2019-10-04T22:33:04.526Z","5.3.0-alpha.11":"2019-10-06T01:38:09.844Z","5.2.2":"2019-10-07T10:07:16.970Z","5.2.3":"2019-10-07T11:08:46.776Z","5.3.0-alpha.12":"2019-10-07T14:40:58.279Z","5.3.0-alpha.13":"2019-10-08T01:38:12.176Z","5.3.0-alpha.15":"2019-10-08T10:13:22.170Z","5.3.0-alpha.17":"2019-10-10T04:50:18.690Z","5.3.0-alpha.18":"2019-10-14T07:54:09.764Z","5.2.4":"2019-10-14T09:42:50.421Z","5.3.0-alpha.19":"2019-10-14T17:42:24.833Z","5.3.0-alpha.20":"2019-10-15T10:49:47.022Z","5.3.0-alpha.21":"2019-10-17T14:58:06.208Z","5.3.0-alpha.22":"2019-10-17T17:57:45.135Z","5.3.0-alpha.23":"2019-10-19T02:37:19.390Z","5.2.5":"2019-10-22T01:42:38.130Z","5.3.0-alpha.24":"2019-10-22T02:02:35.006Z","5.3.0-alpha.25":"2019-10-23T01:37:03.474Z","5.3.0-alpha.26":"2019-10-23T02:19:30.110Z","5.3.0-alpha.27":"2019-10-24T15:09:11.618Z","5.3.0-alpha.28":"2019-10-25T01:58:54.066Z","5.3.0-alpha.29":"2019-10-25T08:01:07.655Z","5.3.0-alpha.30":"2019-10-26T16:19:51.547Z","5.3.0-alpha.31":"2019-10-26T17:45:16.327Z","5.3.0-alpha.32":"2019-10-27T19:13:58.412Z","5.3.0-alpha.33":"2019-10-28T01:56:27.869Z","5.3.0-alpha.34":"2019-10-30T09:32:50.731Z","5.3.0-alpha.35":"2019-11-01T01:56:30.356Z","5.3.0-alpha.36":"2019-11-01T17:38:00.776Z","5.3.0-alpha.37":"2019-11-02T02:24:57.723Z","5.3.0-alpha.38":"2019-11-03T08:37:54.093Z","5.3.0-alpha.39":"2019-11-05T13:45:04.917Z","5.3.0-alpha.40":"2019-11-06T02:57:49.944Z","5.3.0-alpha.41":"2019-11-07T03:17:28.226Z","5.3.0-alpha.42":"2019-11-09T08:04:28.746Z","5.2.6":"2019-11-09T09:50:18.374Z","5.3.0-alpha.43":"2019-11-11T15:43:16.545Z","5.3.0-alpha.44":"2019-11-13T00:48:24.435Z","5.3.0-alpha.45":"2019-11-14T09:35:12.164Z","5.3.0-alpha.46":"2019-11-15T21:55:03.878Z","5.3.0-alpha.47":"2019-11-16T13:04:07.180Z","5.3.0-beta.0":"2019-11-16T15:32:57.011Z","5.3.0-beta.1":"2019-11-18T14:36:45.379Z","5.3.0-beta.2":"2019-11-19T10:28:04.180Z","5.3.0-beta.3":"2019-11-21T06:46:16.824Z","5.3.0-beta.6":"2019-11-24T08:57:08.607Z","5.3.0-beta.7":"2019-11-25T16:19:24.343Z","5.3.0-beta.8":"2019-11-26T01:03:56.861Z","5.3.0-beta.9":"2019-11-26T09:52:54.830Z","5.3.0-beta.10":"2019-11-27T01:24:28.158Z","5.3.0-beta.11":"2019-11-27T23:12:33.184Z","5.3.0-beta.12":"2019-11-28T17:09:28.548Z","5.3.0-beta.13":"2019-11-30T09:41:01.470Z","5.2.7":"2019-11-30T13:16:19.349Z","5.3.0-beta.14":"2019-12-02T03:45:50.895Z","5.2.8":"2019-12-02T06:28:18.357Z","5.3.0-beta.15":"2019-12-04T03:59:05.913Z","5.3.0-beta.16":"2019-12-05T03:42:53.868Z","5.3.0-beta.17":"2019-12-06T14:45:19.198Z","5.3.0-beta.18":"2019-12-06T15:09:49.192Z","5.3.0-beta.19":"2019-12-07T08:52:47.452Z","5.3.0-beta.20":"2019-12-09T12:55:14.860Z","5.3.0-beta.21":"2019-12-10T16:52:35.474Z","5.3.0-beta.22":"2019-12-12T15:28:30.051Z","5.3.0-beta.23":"2019-12-14T14:13:17.395Z","5.3.0-beta.25":"2019-12-15T10:12:55.009Z","5.3.0-beta.26":"2019-12-16T03:52:48.112Z","5.3.0-beta.27":"2019-12-16T04:12:22.783Z","5.3.0-beta.28":"2019-12-16T05:18:37.419Z","5.3.0-beta.29":"2019-12-16T06:49:09.558Z","5.3.0-beta.30":"2019-12-16T09:42:06.547Z","5.3.0-beta.31":"2019-12-16T13:20:29.171Z","5.3.0-rc.0":"2019-12-19T08:56:36.849Z","5.3.0-rc.1":"2019-12-23T09:23:56.688Z","5.3.0-rc.3":"2019-12-26T12:13:18.645Z","5.3.0-rc.4":"2019-12-28T13:11:57.917Z","5.3.0-rc.5":"2019-12-30T19:39:37.536Z","5.3.0-rc.6":"2019-12-31T08:28:24.617Z","5.3.0-rc.7":"2020-01-02T03:07:22.656Z","5.3.0-rc.8":"2020-01-03T08:51:27.600Z","5.3.0-rc.9":"2020-01-04T13:00:18.483Z","5.3.0-rc.10":"2020-01-06T14:34:28.930Z","5.3.0-rc.11":"2020-01-07T14:00:58.133Z","5.3.0-rc.12":"2020-01-08T14:57:35.923Z","5.3.0-rc.13":"2020-01-11T02:19:34.863Z","5.3.0-rc.14":"2020-01-11T08:51:53.915Z","5.3.0":"2020-01-11T09:34:54.190Z","5.3.1":"2020-01-12T15:37:45.473Z","5.3.2":"2020-01-13T15:37:47.734Z","5.3.3":"2020-01-14T09:59:01.605Z","5.3.4":"2020-01-16T06:23:07.704Z","5.3.5":"2020-01-16T19:33:22.386Z","5.3.6":"2020-01-17T08:15:45.596Z","5.3.7":"2020-01-20T06:57:06.793Z","6.0.0-alpha.0":"2020-01-21T14:24:09.997Z","5.3.8":"2020-01-21T16:54:01.250Z","6.0.0-alpha.1":"2020-01-23T12:23:57.242Z","5.3.9":"2020-01-24T14:14:48.685Z","6.0.0-alpha.2":"2020-01-30T13:41:34.907Z","5.3.10":"2020-02-02T07:03:50.294Z","5.3.11":"2020-02-04T15:59:55.085Z","5.3.12":"2020-02-04T23:21:41.812Z","5.3.13":"2020-02-12T03:49:12.978Z","5.3.14":"2020-02-25T15:19:43.021Z","5.3.15":"2020-03-14T03:37:30.467Z","5.3.17":"2020-03-14T07:47:00.426Z","5.3.18":"2020-03-31T13:39:36.793Z","5.3.19":"2020-05-24T04:23:04.395Z","5.3.20":"2020-08-26T16:59:28.907Z","5.3.21":"2020-08-28T00:12:12.394Z"},"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/info","repository":{"type":"git","url":"git+https://github.com/storybookjs/storybook.git","directory":"addons/info"},"bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"license":"MIT","readmeFilename":"README.md","users":{"hexagon6":true},"keywords":["addon","storybook"]}